將OnClick屬性添加到數組javascript

我試圖將數組添加到我的簡單JavaScript計算器的onclick按鈕。將OnClick屬性添加到數組javascript

我的第一次嘗試是在代碼process(text[i]);，但它根本不工作。

因此，我將數組項轉換爲字符串並賦予onclick函數。然後它運行一個奇怪的方式。

您是否讓我知道我可以通過正確的類型？

var text = ["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"]; 

for (var i = 0; i < text.length; i++) { 
    var child = document.createElement('button'); 
    child.innerText = text[i]; 
    child.value = text[i]; 
    var temp = text[i].toString(); //<-- convert to make sure it is string 

    child.onclick = function() {     
    process(temp); //<-- it doesn't work properly, and it won't accept "process(text[i])???". 
    } 

    label1.appendChild(child); 
}   

document.body.appendChild(label1);

來源

2014-11-08 tom tom

我得從我的電腦一步之遙，但下面是幾乎工作。 ops一旦進入正在設置的onclick，就不確定。不知道爲什麼。希望其他人可以建立這一點。

function process(operation) { 
 
    alert(operation); 
 
} 
 

 
var ops = ["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"]; 
 

 
for (var i = 0; i < ops.length; i++) { 
 
    var child = document.createElement('button'); 
 
    child.innerText = ops[i]; 
 
    child.value = ops[i]; 
 

 
    (child.onclick = function() { 
 

 
    process(ops[i]); 
 
    })(i) 
 

 
    // label1.appendChild(child); 
 
    document.body.appendChild(child); 
 
} 
 

 
// document.body.appendChild(label1);

來源

2014-11-08 13:58:11 David

我在代碼中添加了「函數（i）」作爲adeneo的建議。那麼它也工作正常。謝謝。 – 2014-11-08 15:07:26

@tomtom，優秀。你能點擊左邊箭頭下方的複選標記來表示這個答案是你問題的解決方案嗎？ – David 2014-11-08 15:23:31

前面已經深受@adeneo解釋，這個問題是所有onclick處理器使用相同的temp變量。每次迭代提供單獨範圍的另一種方式，就是用的，而不是for循環forEach方法：

["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"].forEach(function(text) { 
    var child = document.createElement('button'); 
    child.innerText = text; 
    child.value = text; 
    child.onclick = function() { 
     process(text); 
    } 
    label1.appendChild(child); 
});

樣品：http://jsfiddle.net/kq1mpm3g/

來源

2014-11-08 13:55:09 dfsq

謝謝！它是簡單和偉大的代碼。 – 2014-11-08 15:03:08

將OnClick屬性添加到數組javascript

回答

相關問題