Creé una calculadora que crea una nueva fila cada vez que se hace clic en un botón. En cada nueva fila generada hay dos campos de entrada en los que los usuarios pueden ingresar números y un div para mostrar la cantidad resultante.
Cálculo: (Entrada1 x Entrada2) - Entrada1
En lo que necesito ayuda es:
Soy nuevo en JavaScript y no puedo encontrar ninguna respuesta que me diga cómo apuntar a nuevos elementos creados usando las funciones createElement. Todo lo que puedo encontrar es cómo crear, agregar, eliminar o agregar una lista de clases o un nodo de texto.
const input1 = document.createElement("INPUT"); document.body.appendChild(input1); const input2 = document.createElement("INPUT"); document.body.appendChild(input2); const result = document.createElement("DIV"); document.body.appendChild(result);una idea puede ser usar EventListener en la entrada creada para manipular los datos
const input1 = document.createElement("INPUT"); document.body.appendChild(input1); input1.addEventListener('change', function (e) { var target = e.target || e.srcElement; console.log(target.value); });también puede agregar un selector (id o clase) al elemento creado y recuperarlo con este selector
const input1 = document.createElement("INPUT"); document.body.appendChild(input1); input1.id = 'test'; function showData() { var input = document.getElementById('test'); console.log(input.value); } <button onclick="showData()">show data</button>con su muestra puede verse como
const input1 = document.createElement("INPUT"); input1.id = 'input1'; document.body.appendChild(input1); const input2 = document.createElement("INPUT"); input2.id = 'input2'; document.body.appendChild(input2); const result = document.createElement("DIV"); result.id = 'result'; document.body.appendChild(result); function showResult() { var input1 = document.getElementById('input1'); var input2 = document.getElementById('input2'); var result = document.getElementById('result'); if (input1 && input2 && result) { result.innerText = input1.value * input2.value; } } <button onclick="showResult()">show result</button>si tiene que crear dinámicamente div y showresult, también puede crear el botón y manipular el evento onclick
function createNewRow() { const input1 = document.createElement("INPUT"); input1.id = 'input1'; document.body.appendChild(input1); const input2 = document.createElement("INPUT"); document.body.appendChild(input2); const result = document.createElement("DIV"); document.body.appendChild(result); const button = document.createElement("BUTTON"); button.innerText = 'show result'; button.addEventListener('click', function() { result.innerText = input1.value * input2.value; }); document.body.appendChild(button); } <button onclick="createNewRow()">create New Row</button>Bien, el Id funciona, pero solo funciona para esa fila. Necesito repetir ese proceso (ecuación) de forma independiente en cada nueva fila que se crea.