Tengo el siguiente código:
Quiero hacer un plus con todas las entradas, y soy nuevo en esto, pero lo intento.
var num1 = document.getElementByID('pree'); var num2 = document.getElementByID('pree1'); var num3 = document.getElementByID('pree2'); var num4 = document.getElementByID('pree3'); var result = document.getElementByID('num1 + num2+ num3+ num4'); <input type="number" name="pree" value="" id="pree" class="form-control"> <input type="number" name="pree1" value="" id="pree1" class="form-control"> <input type="number" name="pree2" value="" id="pree2" class="form-control"> <input type="number" name="pree3" value="" id="pree3" class="form-control"> <input type="number" name="result" value="" id="result" class="result">Soy muy nuevo en esto y me gustaria que alguien me ayudara, desde ya muchas gracias.
getElementByID es un error tipográfico. El método es getElementById (pequeña "d")
Incluso si corrigió el error tipográfico var result = document.getElementById('num1 + num2+ num3+ num4'); no hará nada porque 'num1 + num2+ num3+ num4' no es la identificación de ningún elemento. Desea asignar el total de sumar los values de esas entradas al atributo de value de su elemento de resultado.
No está verificando ningún cambio en esas entradas para poder crear el total. Para eso necesitarás un oyente .
Aquí hay un enfoque un poco más moderno. Utiliza la delegación de eventos para adjuntar un oyente a un elemento contenedor para capturar eventos de change de las entradas a medida que "burbujean" el DOM. Ese oyente llama a la función handleChange .
La función handleChange restablece el total, itera sobre todas las entradas y agrega su valor al total. Luego se establece el valor del result .
// Cache the elements const container = document.querySelector('#container'); const inputs = document.querySelectorAll('input[type="number"]'); const result = document.querySelector('#result'); // Add a listener to the container container.addEventListener('change', handleChange, false); // Reset the total, iterate over the input elements, // and add their value to the total, coercing the string // to a number first. Finally add that total to the // value of the `result` element function handleChange() { let total = 0; inputs.forEach(input => total += Number(input.value)); result.value = total; } <div id="container"> <input type="number" name="pree"> <input type="number" name="pree1"> <input type="number" name="pree2"> <input type="number" name="pree3"> <br /> Result: <input id="result"> </div>Documentación adicional
Agregué un botón para controlar cuándo se activa esto, pero puede cambiar el atributo de name al mismo valor en todos ellos, de modo que pueda recuperarlos como una matriz para recorrer:
function addInputs() { var arr = document.getElementsByName('pree'); var sum = 0; for (var i = 0; i < arr.length; i++) { if (parseInt(arr[i].value)) sum += parseInt(arr[i].value); } var resultInput = document.getElementById('result'); resultInput.value = sum; } <input type="number" name="pree" value="" id="pree" class="form-control"> <input type="number" name="pree" value="" id="pree1" class="form-control"> <input type="number" name="pree" value="" id="pree2" class="form-control"> <input type="number" name="pree" value="" id="pree3" class="form-control"> <input type="number" name="result" value="" id="result" class="result"> <button onclick="addInputs()">Click</button>En primer lugar, si obtiene valores de entrada que siempre serían de tipo cadena. si te gusta calcular, entonces tienes que analizar a int.
ejemplo de trabajo
const btn = document.querySelector('button'); btn.addEventListener('click', () => { var num1= document.getElementById('pree').value; var num2= document.getElementById('pree1').value; var num3= document.getElementById('pree2').value; var num4= document.getElementById('pree3').value; let sum = parseInt(num1) + parseInt(num3) + parseInt(num3) + parseInt(num4) document.getElementById("result").value = sum; console.log(sum) }) <input id="pree" value="1"> <input id="pree1" value="1"> <input id="pree2" value="1"> <input id="pree3" value="1"> <br/> <button>Sum</button> <br/> <input id="result" value="" readonly>