Tengo una cantidad de tipos de entrada y botones ... cada botón al hacer clic incrementa el valor en los tipos de entrada relevantes. Pero en lugar de crear una función separada para cada botón, quiero hacerlo por bucle... donde el bucle aumentará en el nombre y la identificación de la función...
<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>aquí está el código 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>No puede programar el nombre de la función. Puede configurar un parámetro en la función para marcar la diferencia. El parámetro sería el identificador y puede colocar allí la identificación completa del elemento input .
Después de eso, si desea tener la identificación s1 , s2 , etc., debe inicializar la i para comenzar de 1 a 5 en lugar de 0 a menos de 5.
Otra cosa es que debe comprender el papel del placeholder de posición y los atributos de value en el elemento de input . El placeholder de posición solo funciona cuando el value está vacío y no cuenta como el valor del formulario.
// 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> ¿Qué sucede si desea generar input completa y un button con bucles? Puede obtenerlos agregando div y usando el innerHTML , es decir
// 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>Puedes probar estas dos soluciones. Tal vez necesite aprender más sobre los elementos básicos de HTML y sus atributos, también sobre Javascript.