Estoy tratando de usar "onkeyup" para mostrar la salida en tiempo real de un formulario. Parece estar funcionando bien en mi proyecto Codepen, pero no en VS Code. No puedo señalar dónde me estoy equivocando.
Aquí está mi Codepen: https://codepen.io/jonah-cockshaw/pen/OJOrapb
Aquí está el código de VS Code:
<h3>Chiller capacity</h3> <p>Please input each chiller's rated capacity in kW. The rated capacity is on the chiller nameplate.</p> <label for="chiller-1">Chiller 1</label><br> <input type="number" onkeyup=`addAll()` class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br> <label for="chiller-2">Chiller 2</label><br> <input type="number" onkeyup=`addAll()` class="input-field" id="chiller-2" name="chiller-2"placeholder="Input number in KW" value=""><br> <label for="chiller-3">Chiller 3</label><br> <input type="number" onkeyup=`addAll()` class="input-field" id="chiller-3" name="chiller-3" placeholder="Input number in KW" value=""><br> <label for="chiller-4">Chiller 4</label><br> <input type="number" onkeyup=`addAll()` class="input-field" id="chiller-4" name="chiller-4" placeholder="Input number in KW" value=""><br> <label for="chiller-5">Chiller 5</label><br> <input type="number" onkeyup=`addAll()` class="input-field" id="chiller-5" name="chiller-5" placeholder="Input number in KW" value=""><br> <p id="output">Output goes here</p> function addAll() { const chiller1 = Math.floor(document.getElementById("chiller-1").value); const chiller2 = Math.floor(document.getElementById("chiller-2").value); const chiller3 = Math.floor(document.getElementById("chiller-3").value); const chiller4 = Math.floor(document.getElementById("chiller-4").value); const chiller5 = Math.floor(document.getElementById("chiller-5").value); const allChillersValue = chiller1 + chiller2 + chiller3 + chiller4 + chiller5; // console.log(allChillersValue); document.getElementById('output').innerHTML = allChillersValue; };el problema proviene de la forma en que agrega el detector de eventos keyup
onkeyup=`addAll()`la sintaxis html válida es
onkeyup="addAll()"pero una mejor manera en que puedo aconsejar es usar el método addEventlistener en todas las clases de campo de entrada
[...document.getElementsByClassName('input-field')].forEach(input => { input.addEventListener('keyup', addAll); }); [...document.getElementsByClassName('input-field')].forEach(input => { input.addEventListener('keyup', addAll); }); function addAll() { const chiller1 = Math.floor(document.getElementById("chiller-1").value); const chiller2 = Math.floor(document.getElementById("chiller-2").value); const chiller3 = Math.floor(document.getElementById("chiller-3").value); const chiller4 = Math.floor(document.getElementById("chiller-4").value); const chiller5 = Math.floor(document.getElementById("chiller-5").value); const allChillersValue = chiller1 + chiller2 + chiller3 + chiller4 + chiller5; console.log(allChillersValue); document.getElementById('output').innerHTML = allChillersValue; } <h3>Chiller capacity</h3> <p>Please input each chiller's rated capacity in kW. The rated capacity is on the chiller nameplate.</p> <label for="chiller-1">Chiller 1</label><br> <input type="number" class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br> <label for="chiller-2">Chiller 2</label><br> <input type="number" class="input-field" id="chiller-2" name="chiller-2"placeholder="Input number in KW" value=""><br> <label for="chiller-3">Chiller 3</label><br> <input type="number" class="input-field" id="chiller-3" name="chiller-3" placeholder="Input number in KW" value=""><br> <label for="chiller-4">Chiller 4</label><br> <input type="number" class="input-field" id="chiller-4" name="chiller-4" placeholder="Input number in KW" value=""><br> <label for="chiller-5">Chiller 5</label><br> <input type="number" class="input-field" id="chiller-5" name="chiller-5" placeholder="Input number in KW" value=""><br> <p id="output">Output goes here</p>Es un tema de copiar y pegar. VS Code ha convertido las comillas simples ' en ticks ` .
Cambie las marcas que rodean el valor de la propiedad onkeyup para cada elemento a comillas simples o dobles.
INCORRECTO
<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>
FIJADO
<input type="number" onkeyup="addAll()" class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>
Al corregir esos caracteres, el código se ejecutará.