How to change constant to variable in javascript

Question

This is the full code using constant number and it works. ( If I click 'text 2' the box is moved.)

<!DOCTYPE html>
<html>
<head>
<style> 
.myDIV {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<div class="text">text 1</div>
    <div class="myDIV"></div>
<div class="text">text 2</div>
    <div class="myDIV"></div>

<script>
var texts = document.getElementsByClassName("text");
var boxes = document.getElementsByClassName("myDIV");
        texts[1].onclick = function(e){
        boxes[1].style.top = "100px";
}
</script>
</body>
</html>

But after I changed the constant '1' to variable'i' in the javascript, it doesn't work. I think there is some error in my code, but I don't know what it is.

<script>
var texts = document.getElementsByClassName("text");
var boxes = document.getElementsByClassName("myDIV");
    for(var i = 0; i < texts.length; i++)
        texts[i].onclick = function(e){
        boxes[1].style.top = "100px";
}
</script>

Related // Asynchronous Process inside a javascript for loop // JavaScript closure inside loops – simple practical example — Jonathan Lonowski
– Jonathan Lonowski, Commented Jul 1, 2017 at 19:05
I put it into a JSFiddle and it worked fine: jsfiddle.net/1bmuo05k — Stephen S
– Stephen S, Commented Jul 1, 2017 at 19:17
Thank you Stephen. It didn't work to me, so I thought my code have some error. I should restart my browsers. — 테크닉
– 테크닉, Commented Jul 1, 2017 at 19:22

Mark · Accepted Answer · 2017-07-01 19:23:52Z

1

A more idiomatic way to do this is with forEach(). It prevents the problems of variables in for loops.

Here's a jsfiddle: https://jsfiddle.net/gr8jzkdr/

<!DOCTYPE html>
<html>
<head>
<style> 
.myDIV {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}
</style>
</head>
<body>
<div class="text">text 1</div>
    <div class="myDIV"></div>
<div class="text">text 2</div>
    <div class="myDIV"></div>
<div class="text">text 3</div>
    <div class="myDIV"></div>
<div class="text">text 4</div>
    <div class="myDIV"></div>

<script>
var texts = document.querySelectorAll(".text");
var boxes = document.querySelectorAll(".myDIV");
texts.forEach(function(element, index) {
    element.onclick = function(e){
        boxes[index].style.left = "100px";

    }
});

</script>
</body>
</html>

answered Jul 1, 2017 at 19:23

Mark

92.6k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hassan Imam Over a year ago

Is there any need of e variable in the onclick function?

Mark Over a year ago

No, the event will be passed to the function, but it isn't being used in this case.

테크닉 Over a year ago

What I want to do finally is that when I mousemove on the text, each image follows the mouse pointer.(I should do this without <span>tag) so I revised my code accroding to your helpful answer. and it has problem again. here’s a jsfiddle: jsfiddle.net/technic/agze4Lgh/#&togetherjs=qJLgL5Orjz

Mark Over a year ago

Your code has a typo that is throwing an error -- you have boxed when you want boxes. To make this work you need to add units such as: boxes[index].style.top = y+"px"

JSmith · Accepted Answer · 2017-07-01 19:15:28Z

1

You need closure, plus I think you've forgotten to put a i index in yourboxes[] array.

var texts = document.getElementsByClassName("text");
var boxes = document.getElementsByClassName("myDIV");

for(var i = 0; i < texts.length; i++)
{
  (function(){
    var ci = i;
    texts[ci].onclick = function(e){
    boxes[ci].style.top = "100px";}
   })();
}

.myDIV {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: coral;
    color: white;
}

<div class="text">text 1</div>
    <div class="myDIV"></div>
<div class="text">text 2</div>
    <div class="myDIV"></div>

answered Jul 1, 2017 at 19:15

JSmith

4,8526 gold badges36 silver badges59 bronze badges

Collectives™ on Stack Overflow

How to change constant to variable in javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related