First of all, I am beginner in programming. I've got a question qbout JavaScript DOM. I would like to check if a tag or node has a backgroundColor style in order to execute the rest of the code, but I realize that nothing happens even if it's already coloured! in other words, I have three questions that the user needs to answer to, and when he or she click on "yes" or "no" buttons (span) another button has to show up asking the user to confirm his or her answers, in the "if" condition i couldn't check if "yes" or "no" buttons have been clicked.. I also tried to put .clicked property but it doesn't work. Here's my code:

HTML

<ul id="questions">
        <li id="0">
            <span>Do you like JavaScript?</span>
            <span>Yes</span><span>No</span><span ></span>
        </li>
        <li id="1">
            <span>JavaScript and Java are the same</span>
            <span>Yes</span><span>No</span ><span ></span>
        </li>
        <li id="2">
            <span>JavaScript is easy to learn</span>
            <span>Yes</span><span>No</span><span ></span>
        </li>
    </ul>

JavaScript

window.addEventListener('load', () => { 
    
    let reponsesBonnes   = ["Oui", "Non", "Oui"];
    let reponsesFaites   = ["", "", ""];
    let reponsesFaitesNb = 0;

    let span1 = document.getElementById("0").getElementsByTagName("span")[1];
    let span2 = document.getElementById("0").getElementsByTagName("span")[2];
    let span3 = document.getElementById("1").getElementsByTagName("span")[1];
    let span4 = document.getElementById("1").getElementsByTagName("span")[2];
    let span5 = document.getElementById("2").getElementsByTagName("span")[1];
    let span6 = document.getElementById("2").getElementsByTagName("span")[2];
    
    //choix des réponses
    span1.addEventListener("click", function() {
        span1.style.backgroundColor = 'gray';
        span2.style.backgroundColor = '#eee';
    });

    span2.addEventListener("click", function() {
        span2.style.backgroundColor = 'gray';
        span1.style.backgroundColor = '#eee';
    });

    span3.addEventListener("click", function() {
        span3.style.backgroundColor = 'gray';
        span4.style.backgroundColor = '#eee';
    });

    span4.addEventListener("click", function() {
        span4.style.backgroundColor = 'gray';
        span3.style.backgroundColor = '#eee';
    });

    span5.addEventListener("click", function() {
        span5.style.backgroundColor = 'gray';
        span6.style.backgroundColor = '#eee';
    });

    span6.addEventListener("click", function() {
        span6.style.backgroundColor = 'gray';
        span5.style.backgroundColor = '#eee';
    });

    if (span1.style.backgroundColor == 'gray' || span2.style.backgroundColor == 'gray') {
        console.log("test"); // doesn't work !!
    }

CodePudding user response：

It because your if statement only runs once. Wrap it inside a function and call that function after each click:

let span1 = document.getElementById("0").getElementsByTagName("span")[1];
let span2 = document.getElementById("0").getElementsByTagName("span")[2];

span1.addEventListener("click", function () {
    span1.style.backgroundColor = "gray";
    span2.style.backgroundColor = "#eee";
    checkColor();
});

span2.addEventListener("click", function () {
    span2.style.backgroundColor = "gray";
    span1.style.backgroundColor = "#eee";
    checkColor();
});

function checkColor() {
    if (
        span1.style.backgroundColor == "gray" ||
        span2.style.backgroundColor == "gray"
    ) {
        console.log("test"); // doesn't work !!
    }
}

<ul id="questions">
    <li id="0">
        <span>Do you like JavaScript?</span>
        <span>Yes</span><span>No</span><span ></span>
    </li>
    <li id="1">
        <span>JavaScript and Java are the same</span>
        <span>Yes</span><span>No</span ><span ></span>
    </li>
    <li id="2">
        <span>JavaScript is easy to learn</span>
        <span>Yes</span><span>No</span><span ></span>
    </li>
</ul>

Note: this snippet only includes the first 2 spans.