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]; } }来收集相关值，尤其是那些需要迭代的值：

{{1}}

Answer 2

这是一个简单的方法......

function changed(n){

  n = parseInt(n); // convert to integer
  if (!n) { return; } // end execution if not found (if not a number)

  for (var i = 1; i <= 3; i++) {

    // Since there is no HTML, textContent is better
    // eval is not needed (people often say eval is evil) ;)
    // using the i to increment
    document.getElementById('boxA' + i).textContent = n + i -1;
  }
}

祝你好运：）

将变量赋给innerHTML

2 个答案: