How to iterate through all classes with a javascript toggle?

Question

This is a toggle switch that when unchecked, will display 'min'. If checked, then 'min' will switch to 'max' and will toggle back and forth.

My expected result is that however many times this checkbox is on the page, the function will work across the entire page.

 var x = document.getElementsByClassName("text"); function queryToggle() { for (let i = 0; i < x.length; i++) { if (x.innerHTML === "min") { x.innerHTML = "max"; } else { x.innerHTML = "min"; } } }

 <div class="options mb-2"> <label for="toggleQuery">Use 'max-width'?</label> <input type="checkbox" name="toggleQuery" id="toggleQuery" onclick="queryToggle()" /> </div> <span class="text">min</span>

Answer 1

I have adjusted your code and included comments.

If you want to re-use the checkbox then simply change the id of each new checkbox you create and it will work across the page.

Run the snippet below:

 //your span var x = document.getElementsByClassName("text"); //here we are passing "input" as a function parameter function queryToggle(input) { //checkbox will take the id of any new input we create on the page //the id must change for each new checkbox var checkbox = document.getElementById(input.id); for (let i = 0; i < x.length; i++) { //check if checkbox is checked, if checked then change innerHTML to "max" if (checkbox.checked == true) { x[i].innerHTML = "max"; // else change innerHTML to "min" } else { x[i].innerHTML = "min"; } } }

 <div class="options mb-2"> <label for="toggleQuery">Use 'max-width'?</label> <input type="checkbox" name="toggleQuery" id="toggleQuery1" onChange="queryToggle(this)" /> <input type="checkbox" name="toggleQuery" id="toggleQuery2" onChange="queryToggle(this)" /> <input type="checkbox" name="toggleQuery" id="toggleQuery3" onChange="queryToggle(this)" /> <input type="checkbox" name="toggleQuery" id="toggleQuery4" onChange="queryToggle(this)" /> </div> <span class="text">min</span> <span class="text">min</span> <span class="text">min</span> <span class="text">min</span> <span class="text">min</span>

Answer 2

Using you current code, try this:

function queryToggle() {
    let x = document.getElementsByClassName("text");
    for (let i = 0; i < x.length; i++) {
        console.log(x[i])
        if (x[i].innerHTML === "min") {
            x[i].innerHTML = "max";
        } else {
            x[i].innerHTML = "min";
        }
    }
}

Since x is an 'array-like' object you have to iterate over each item in it by its index, you were operating on the entire array, if that makes sense.

Shorter version

function queryToggle() {
    let x = document.getElementsByClassName("text");
    for (let i = 0; i < x.length; i++) {
        x[i].innerHTML = x[i].innerHTML === "min" ? "max" :"min";
    }
}

Another shorter version with spread operator no need to create the x array unless you need it somewhere else, downside is that you will be accessing the DOM on every call

function queryToggle() {
    [...document.getElementsByClassName("t_text")].forEach((i)=>
        i.innerHTML = i.innerHTML === "min" ? "max" :"min")
}