我有許多輸入型別和按鈕......點擊每個按鈕都會增加相關輸入型別中的值。但不是為每個按鈕創建一個單獨的函式，而是我想通過回圈來完成......其中回圈將增加函式名稱和 id......
<input type="number" id="s1"> <button onclick="increment_s1();">Add</button>
<input type="number" id="s2"> <button onclick="increment_s2()">Add</button>
<input type="number" id="s3"> <button onclick="increment_s3">Add</button>
這是JavaSc代碼
<script>
var i = 1;
for (i = 0; i < 5; i ) {
var data = 0;
document.getElementById("s" i).innerText = data;
function ['increment_' i]() {
data = data 1;
document.getElementById("s" i).placeholder = data;
i ;
}
}
</script>
uj5u.com熱心網友回復：
您不能對函式名稱進行編程。您可以在函式中設定一個引數以產生影響。引數將是識別符號，您可以將整個input元素 id 放在那里。
之后，如果你想擁有 id s1，s2，等等，你應該將 初始化i為從 1 到 5 而不是 0 到小于 5。
另一件事是，您需要了解元素中的角色placeholder和value屬性。僅當input為空且不計為表單值時才有效。placeholdervalue
// This is for handling onclick
function increment(id) {
var elem = document.getElementById(id);
elem.value = parseInt(elem.value) 1;
}
// This is to initialize the 0 values
for (var i = 1; i <= 5; i ) {
var data = 0;
document.getElementById("s" i).value = data;
}<input type="number" id="s1"> <button onclick="increment('s1');">Add</button>
<input type="number" id="s2"> <button onclick="increment('s2')">Add</button>
<input type="number" id="s3"> <button onclick="increment('s3')">Add</button>
<input type="number" id="s4"> <button onclick="increment('s4')">Add</button>
<input type="number" id="s5"> <button onclick="increment('s5')">Add</button>如果您想生成整體input和button帶回圈怎么辦？您可以通過添加div和使用來獲取它們innerHTML，即
// This is for handling onclick
function increment(id) {
var elem = document.getElementById(id);
elem.value = parseInt(elem.value) 1;
}
var divElem = document.querySelector('div');
// Set up empty first
divElem.innerHTML = "";
for(var i=1; i<=5; i ) {
// Create elements here
var innerElem = `<input type="number" id="s${i}" value="0"> <button onclick="increment('s${i}')">Add</button>`;
// Push them all into innerHTML
divElem.innerHTML = innerElem;
}<div></div>您可以嘗試這兩種解決方法。也許您可能需要了解更多關于基本 HTML 元素及其屬性以及 Javascript 的資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427731.html
標籤：javascript 数组 功能 循环 for循环
上一篇：將標題添加到二維陣列