onclick value inside loop only works for last value in table

Question

I am new to Javascript. I am trying to create a unit conversion calculator. I want to loop through a table x and add an onclick that outputs the clicked buttons value.

I've been able to return a NodeList which I am looping through. After I add an onclick. Each button click outputs the value of the last button in the list.

var x = document.getElementsByName("Scalar")

var out = document.getElementById("output")

function Edit(Input){
    out.innerHTML = Input;
}

var i;
for (i = 0; i < x.length; i++) {
    out.innerHTML = out.innerHTML + x[i].name;
    var b = x[i];
    b.onclick = function() {
        Edit(out.innerHTML + b.value)
    }
    
}

<input type = "button" id="Scalar" value = "K" name = "Scalar"/>

<div id="output">

</div>

If I click any button my output will be the value of the last button in the list (DDDDDD)

Use this.value instead of b. – Edwin Dijas Chiwona Jun 06 '19 at 20:20 — Edwin Dijas Chiwona, Jun 06 '19 at 20:20

score 1 · Accepted Answer · answered Jun 06 '19 at 20:29

1

Variable b is being over written since its in the same code block. To get correct value use this.value instead of b.value. Avoid creating a function within a loop, overwriting variables. Use addeventlistener instead of onclick. var x = document.getElementsByName("Scalar")

var out = document.getElementById("output")

function Edit(){
    out.innerHTML = this.value
 }

for (i = 0; i < x.length; i++) {

   x[i].addEventListener( 'click' , Edit );

 }

answered Jun 06 '19 at 20:29

Edwin Dijas Chiwona

610
6
14

Will read up about addEventListener and this, but it works! Thank you so much. Was driving me crazy, I can finish my assignment now :) – JCK Jun 06 '19 at 20:38

onclick value inside loop only works for last value in table

1 Answers1