javascript - 将变量分配给 innerHTML

Question

首先，我不太精通 JavaScript。我想使用 JavaScript 动态构建一个包含内容的 HTML 表格 TD 元素。这是我无法正常工作的代码。

<script type="text/javascript">
function changed(num){
    a1=num;
    a2=num+1;
    a3=num+2;

    for(var i=1;i<=3;i++){
       document.getElementById("boxA"+i).innerHTML=eval('a'+i);
    }
}
</script>

这是 HTML 代码:

<input type="text" name="box" onChange="changed(this.value);">

<table width="400" border="10" cellpadding="5">
<tr>
    <td id="boxA1">&nbsp;</td>
    <td id="boxA2">&nbsp;</td>
    <td id="boxA3">&nbsp;</td>
</tr>
</table>

如果我在输入框输入值1，那么后面的值应该是1,2,3

Answer 1

+当 String 时，运算符将始终执行连接给它，value的 <input>永远是:

console.log('1' + 1);
// '11'

console.log(1 + '1');
// '11'

您必须转换 value到 Number执行加法:

<... onChange="changed(parseFloat(this.value));">

---

您还应该考虑使用 Array或 Object收集相关值，尤其是那些需要迭代的值:

function changed(num){
    var a = {
        1: num,
        2: num + 1,
        3: num + 2
    };

    for(var i=1;i<=3;i++){
       document.getElementById("boxA"+i).innerHTML = a[i];
    }
}