JS HTML: Im trying to use the for in or the for each loop instead of the default for loop in my co-CodePudding

**I want to set the background of all objects of the .false class back to the default color before i change the correct class to green **

            let objects = document.querySelectorAll('.false'); 
            let myobject = document.querySelector('.correct'); 
            myobject.addEventListener("click", function(){
                for (let items in objects)
            {
                items.style.backgroundColor = "#d9edff";
            }
                document.getElementById("tr1").innerHTML = "CORRECT!";
                document.querySelector(".correct").style.backgroundColor = "green";
            });

EDIT: The full code. I needet to put the objects[object] in to let the background color change to default. But now the button that should get green dosnt work anymore...

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Trivia!</title>
    <script>

        document.addEventListener('DOMContentLoaded', function() {

            let objects = document.querySelectorAll('.false'); // var mit object durch getElement function gefüllt mit .class
            let myobject = document.querySelector('.correct'); // var mit object durch getElement function gefüllt mit .class
            myobject.addEventListener("click", function(){
                for (object in objects)
            {
                objects[object].style.backgroundColor = "#d9edff";
            }
                document.getElementById("tr1").innerHTML = "CORRECT!";
                document.querySelector(".correct").style.backgroundColor = "green";
            });


            for (let i = 0; i < objects.length; i  )
            {
                objects[i].addEventListener("click", function(){
                    document.querySelector(".correct").style.backgroundColor = "#d9edff";  //reset correct button
                    objects[i].style.backgroundColor = "red";
                    document.getElementById("tr1").innerHTML = "FALSE!";
                })
            }

            // Part2 without saving the check object in a let/var first and adding the eventlistener in 1 go
            document.querySelector('.check').addEventListener("click", function(){
                let input = document.querySelector("input");
                if(input.value.toLowerCase() == "cs50")
                    {
                        input.style.backgroundColor = "green";
                        document.getElementById("tr2").innerHTML = "CORRECT!";
                    } else {
                        input.style.backgroundColor = "red";
                        document.getElementById("tr2").innerHTML = "FALSE!";
                    }
            })
        });
    </script>

    </head>
    <body>
        <div >
            <h1>Trivia!</h1>
        </div>

        <div >
            <div >
                <h2>Part 1: Multiple Choice </h2>
                <hr>
                <!-- TODO: Add multiple choice question here -->
                <h3>This is the first question. Multiple choice with atleast 3 buttons? Second one is correct! Which one is correct?</h3>
                <h4><p id = "tr1"> </p></h4>
            <ul>
                <button >Click me to change my color to red</button>
                <button >Click me to change my color to green</button>
                <button >Click me to change my color to red</button>
            </ul>
            </div>


            <div >
                <h2>Part 2: Free Response</h2>
                <hr>
                <h3>This is the second question. What course is this? </h3>
                <h4><p id = 'tr2'></p></h4>
                <input type="Text" placeholder="Type answer here!">
                <button >submit</button>
            </div>
        </div>
    </body>
</html>

CodePudding user response：

querySelector returns NodeList instead of array. That's why you can't use some of array methods. You can use method for...of:

 let objects = document.querySelectorAll('.false'); 
    let myobject = document.querySelector('.correct'); 
    myobject.addEventListener("click", function(){
        for (let items of objects)
    {
        items.style.backgroundColor = "#d9edff";
    }
        document.getElementById("tr1").innerHTML = "CORRECT!";
        document.querySelector(".correct").style.backgroundColor = "green";
    });