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](https://stackoverflow.com/questions/11488014/asynchronous-process-inside-a-javascript-for-loop) // [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Jonathan Lonowski, Jul 01 '17 at 19:05
I put it into a JSFiddle and it worked fine: https://jsfiddle.net/1bmuo05k/ — Stephen S, Jul 01 '17 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. — 테크닉, Jul 01 '17 at 19:22

score 1 · Answer 1 · answered Jul 01 '17 at 19:15

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>

score 1 · Accepted Answer · answered Jul 01 '17 at 19:23

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 01 '17 at 19:23

Mark

90,562
7
108
148

Is there any need of `e` variable in the onclick function? – Hassan Imam Jul 01 '17 at 19:27
No, the event will be passed to the function, but it isn't being used in this case. – Mark Jul 01 '17 at 19:37
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 tag) so I revised my code accroding to your helpful answer. and it has problem again. here’s a jsfiddle: https://jsfiddle.net/technic/agze4Lgh/#&togetherjs=qJLgL5Orjz – 테크닉 Jul 01 '17 at 20:09
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"` – Mark Jul 01 '17 at 20:39

How to change constant to variable in javascript

2 Answers2