javascript - Live update multple input fields to multiple span tags

Question

I have a form where I want the user to be able to enter data into the text field, but then I want this to be entered into the span tags live as they are typing each character.

I have managed to do this successfully with one input field going to one span tag using most of the javascript in this post. But changing it slightly to try and accomodate multiple input fields to multiple span tags.

But I can't seem to get this to work when I have multiple text fields that I want to live update to multiple span tags. For example:

I want this input to live update to the below span tag:

<input type="text" class="inst_name">

<span class="nametag"></span>

and I want this input to live update this span tag:

<input type="text" class="keypair_name">

<span class="keyname"></span>

But when I do, it works with the first one (the inst_name to nametag) but when I try it with the second one (keypair_name to keyname) it keeps showing up in my html as undefined where the text should be live updating to but the code doesn't actually produce any errors.

Below is the JavaScript code I have tried:

var inputKeyName = document.querySelector(".keypair_name"),
outputKeyName = document.querySelector(".keyname"),
inputInstName = document.querySelector(".inst_name"),
outputInstName = document.querySelector(".nametag");

function keydownHandler() {
    outputKeyName.innerHTML = inputKeyName.value;
}

function keydownHandlerInstName() {
    outputInstName.innerHTML = inputInstName.value;
}

inputKeyName.addEventListener("input", keydownHandler);
inputInstName.addEventListener("input", keydownHandlerInstName);

Any ideas on how I can get this to work would be much appreciated. Thanks

question from:https://stackoverflow.com/questions/65860233/live-update-multple-input-fields-to-multiple-span-tags

Answer 1

So I have found out the problem. A rookie mistake of using the same name twice in my html. I had used the same name for a class name of "inst_name" for my input field as well as a div elsewhere in my code that I didn't realise were named exactly the same. Thanks for commenting and confirming this was working.