增加函数名称和 id javascript

Question

我有多种输入类型和按钮....单击每个按钮都会增加相关输入类型中的值。但是我不想为每个按钮创建一个单独的函数，而是通过循环来完成....其中循环将增加函数名称和 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>

Answer 1

您不能编写函数名称。您可以在函数中设置一个参数来有所作为。参数将是标识符，您可以将整个 input 元素 id 放在那里。

之后，如果你想拥有ids1，s2，等等，你应该初始化i从1到5开始，而不是从0到小于 5.

另一件事是，您需要了解 placeholder 和 value 属性在 input 元素中的作用。 placeholder 仅在 value 为空且不计入表单值时有效。

// 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.

增加函数名称和 id javascript

increment in the function name and id javascript

javascript

arrays

loops

for-loop

function