时间戳

首页 > 解决方案 > 循环内的 onclick 值仅适用于表中的最后一个值

javascript - 循环内的 onclick 值仅适用于表中的最后一个值

问题描述

我是 Javascript 新手。我正在尝试创建一个单位转换计算器。我想遍历一个表 x 并添加一个输出单击按钮值的 onclick。

我已经能够返回一个我正在循环的 NodeList。在我添加一个 onclick 之后。每次单击按钮都会输出列表中最后一个按钮的值。

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>

如果我单击任何按钮，我的输出将是列表中最后一个按钮的值 (DDDDDD)

标签： javascript

解决方案

变量 b 被覆盖，因为它在同一个代码块中。要获得正确的值，请使用 this.value 而不是 b.value。避免在循环中创建函数，覆盖变量。使用 addeventlistener 而不是 onclick。var x = document.getElementsByName("标量")

var out = document.getElementById("output")

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

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

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

 }

推荐阅读