将变量赋值给innerHTML

首先，我对JavaScript不太了解。我想用JavaScript动态构建一个HTML表格TD元素。这是我的代码无法正常工作。将变量赋值给innerHTML

<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

来源

2014-04-14 Sammy

你什么错误？ –

的+操作员将总是当String给予它时执行级联，其中的<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]; 
    } 
}

来源

2014-04-14 16:41:24

+1解释如何不使用'eval'。 –

+1令人惊讶的是，类型编号的输入值也是一个字符串。 – Christophe

谢谢。你的代码工作！ – Sammy

这里有一个简单的方法....

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; 
    } 
}

好运 :)

来源

2014-04-14 17:21:36 erosman

将变量赋值给innerHTML

回答

相关问题