making a loop to display buttons

Question

I am trying to make a loop that will display some images and add an event listener to each image which, when clicked will assign the appropriate value to humanGoal. I have:

var humanGoal;

function displayPicker(round){
    for(var i = 0; i <= round; i++){
        document.write('<img src=img/die' + i + '.png id="' + 'picker' + i + '">');
        document.getElementById('picker'+i).addEventListener("click", function () {
            humanGoal = i;
            document.write('you picked ' + humanGoal );
        });
    }
}

why does humanGoal always === round+1, instead of the variable i from the for loop?

try i.toString()

oneNiceFriend
– oneNiceFriend

2017-03-29 19:05:56 +00:00
Commented Mar 29, 2017 at 19:05 — oneNiceFriend
– oneNiceFriend, Commented Mar 29, 2017 at 19:05

kind user · Accepted Answer · 2017-03-29 19:19:13Z

1

The humanGoal variable is being overwrited with every for loop iteration and holds the round + 1 value at the end. Different words speaking - it will always display a wrong index.

Solution: apply same class to the each img element, bind a click event listener and display the actual index by passing i variable inside the Array#forEach function.

function displayPicker(round){
    for (var i = 0; i <= round; i++){
      document.write('<img src=img/die' + i + '.png id="' + 'picker' + i + '" class="img">');
    }
    var elems = document.getElementsByClassName('img');
        Array.from(elems).forEach((v,i) => v.addEventListener('click', function() {
          console.log(`You picked ${i}`);
        }));
}

displayPicker(5);

edited Mar 29, 2017 at 19:19

answered Mar 29, 2017 at 19:11

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

sumit chauhan · Accepted Answer · 2017-03-29 19:17:59Z

See answer to your question is simple, when you were trying to assign human goal with value of i, the loop is already been iterated over "rounds" value that why you always getting i === round inside click function.

See the below code snippet,

<html>
	<script>
	var humanGoal;

		function displayPicker(round){
			for(var i = 0; i <= round; i++){
				document.write('<img src=img/die' + i + '.png id="' + 'picker' + i + '">');
				document.getElementById('picker'+i).addEventListener("click", function () {
					console.log("me getting called second");
					humanGoal = i;
					document.body.append('you picked ' + humanGoal );
				});
				console.log("me getting called first");
			}
		}
	
	</script>
	<body onload="displayPicker(4)">
	</body>
</html>

for getting the correct result you can follow the approach provided by @Kind user

Collectives™ on Stack Overflow

making a loop to display buttons

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related