We Keep Coding

Using onkeyup to display output whilst typing

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.

jQuery For Loop Returns Undefined Except First Character

I am trying to figure out why my for loop is coming back as 'undefined' with the exception of the first character. I've tried a lot of different things, including the .each() and $.each() jQuery methods with the same result. I appreciate any help in advance.
$(".two-factor-input:last-child").on("keyup", function(){
if ($(this).val() !== ""){
var input = $(".two-factor-input");
var output = "";
for (var i = 0; i < input.length; i++){
output += input.val()[i];
}
$(".modal-message").val(output);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="1" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="2" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="3" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="4" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="5" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="6" placeholder="·" autocomplete="off">
<input class="modal-message">
Input
321321
Current Output
3undefinedundefinedundefinedundefinedundefined
Desired Output*
321321

This version of the logic maps all the values of the inputs and then joins them into a single string. If the length of the string matches the number of inputs, it sets the value. Otherwise it blanks the value out.
var $inputs = $(".two-factor-input");
$inputs.last().on("keyup", function(){
var newValue = $inputs.get().map(it => it.value.trim()).join('');
$('.modal-message').val(
(newValue.length === $inputs.length) ? newValue : ''
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="1" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="2" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="3" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="4" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="5" placeholder="·" autocomplete="off">
<input class="two-factor-input" maxlength="1" pattern="[\d]*" tabindex="6" placeholder="·" autocomplete="off">
<input class="modal-message">
Your original issue is that you were performing a [i] on the result of val(), not on input which is the jQuery object with the result stack.

You should loop this differently, but if you want to loop it this way just use eq(). Also, it'd be better practice to name input -> $inputs
output += input.eq(i).val();

how can I use oninput without keyboard or mouseclick once there is a number entered inside my input that's driven by code?

I'm enetering input digits with my javascript and I want to activate a function every time there is a digit change (driven by javascript) inside on of my inputs without using keyboard or mouseclick.
how can I do that? :)
<div class="row mt-3">
<div class="recLock justify-content-center">
<input oninput="finalCodeCheck(this)" type="text" maxlength="1" name="dig0" placeholder="*">
<input oninput="finalCodeCheck(this)" type="text" maxlength="1" name="dig1" placeholder="*">
<input oninput="finalCodeCheck(this)" type="text" maxlength="1" name="dig2" placeholder="*">
<input oninput="finalCodeCheck(this)" type="text" maxlength="1" name="dig3" placeholder="*">
<input oninput="finalCodeCheck(this)" type="text" maxlength="1" name="dig4" placeholder="*">
<input oninput="finalCodeCheck(this)" type="text" maxlength="1" name="dig5" placeholder="*">
</div>
</div>

<p>Write something in the text field to trigger a function.</p>
<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myInput").value;
document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

Auto Tab to the next input field when 1 character is filled with an input field disabled

Hello friends I want to do Auto tab to next input field when fill 4 characters but 1 character and if there is a disabled input field that passes to the next enabled
How are you these questions?
Auto tab to next input field when fill 4 characters
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});

Use nextAll() method(next() method can't use since it only selects immediate adjucent sibling) with :enabled(to get only enabled inputs) and :first(to get first or nearest one among them) pseudo-class selectors.
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).nextAll('.inputs:enabled:first').focus();
}
});
$(".inputs").keyup(function() {
if (this.value.length == this.maxLength) {
$(this).nextAll('.inputs:enabled:first').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" disabled="disabled" />
<input class="inputs" type="text" maxlength="1" />

Finding the first empty input

<div class="input-group">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
</div>
I have only these inputs on a page and I'm trying to focus and enter a value dynamically into each empty input:
document.querySelector('input[value=""]').value = 1
... works but only for the first input, shouldn't this select the next empty input everytime?

This works:
document.getElementById('fill').addEventListener('click', evt => {
document.querySelector('input[value=""]').setAttribute('value', '1');
});
<div class="input-group">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
<input type="password" maxlength="1" value="" readonly="">
</div>
<button id="fill">Fill</button>
.value = ... is not actually changing the attribute itself in the DOM. Use .setAttribute to make the actual change in the DOM that querySelector can see.