javascript - How to apply eventListener to all input className

Question

I want to add EventListener to all input className that will disable space when typing using oninput.

input class="inputX" id="idA"></input>
input class="inputX" id="idB"></input>
input class="inputX" id="idC"></input>
input class="inputX" id="idD"></input>

Im using FOR statement and still nowhere. It can be done if im using getElementById but not with getElementsByClassName/Name and even with querySelectorAll (which I believe there is some code missing).

I found JQuery code but I dont know how to write it back in Javascript.

$(".inputX").keyup(function() {
    $(this).val($(this).val().replace(/s/g, ""));

Hope someone can help me out ~ Thanks

Manage to disable space when using getElementById (as below), but how to use getElementsByClassName?

document.getElementById("idA").addEventListener("input", myFunction);

function myFunction() {
  var x = document.getElementById("idA");
  x.value = x.value.replace(/s/g, "");
}  

<input class="inputX" id="idA"></input><br />
<input class="inputX" id="idB"></input><br />
<input class="inputX" id="idC"></input><br />
<input class="inputX" id="idD"></input><br />

question from:https://stackoverflow.com/questions/66060497/how-to-apply-eventlistener-to-all-input-classname

Answer 1

First you need to understand the difference between getElementsByClassName and querySelectorAll. First one creates HTMLCollection[] while latter one creates a NodeList[].

HTMLCollection[] cannot be iterated with forEach while NodeList[] can:

const withClassName = document.getElementsByClassName('foo');
const withQuerySelector = document.querySelectorAll('.foo');

console.log(withClassName.forEach);
console.log(withQuerySelector.forEach);

<div class='foo'></div>