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;
};
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>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.