使用 onkeyup 在打字时显示 output

Question

I am trying to use "onkeyup" to display the realtime output of a form. It appears to be working just fine in my Codepen project, but not in VS Code. I can't pinpoint where I'm going wrong.

Here's my Codepen: https://codepen.io/jonah-cockshaw/pen/OJOrapb

Here's the code from 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;
};

Answer 1

the issue come from the way you add the keyup event listener

 onkeyup=`addAll()`

the valid html syntax is

onkeyup="addAll()"

but a better way i can advice is use addEventlistener method on all input-field class

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

Answer 2

It's a copy-paste issue. VS Code has turned single quotes ' into ticks ` .

Change the ticks surrounding the onkeyup property value for each element to a single or double quote instead.

INCORRECT

<input type="number" onkeyup=`addAll()` class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>

FIXED

<input type="number" onkeyup="addAll()" class="input-field" id="chiller-1" name="chiller-1" placeholder="Input number in KW" value="" required><br>

By fixing those characters, the code will run.