Using onkeyup to display output whilst typing-CodePudding

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()`  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()`  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()`  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()`  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()`  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;
};

CodePudding user response：

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"  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"  id="chiller-2" name="chiller-2"placeholder="Input number in KW" value=""><br>

<label for="chiller-3">Chiller 3</label><br>
<input type="number"  id="chiller-3" name="chiller-3" placeholder="Input number in KW" value=""><br>

<label for="chiller-4">Chiller 4</label><br>
<input type="number"   id="chiller-4" name="chiller-4" placeholder="Input number in KW" value=""><br>

<label for="chiller-5">Chiller 5</label><br>
<input type="number"  id="chiller-5" name="chiller-5" placeholder="Input number in KW" value=""><br>

<p id="output">Output goes here</p>

CodePudding user response：

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

FIXED

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

By fixing those characters, the code will run.