將變量賦值給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

回答

相關問題