CODEWITHSUNDEEP
javascripthtmlcheckbox
Jane
Jane

Reputation: 47

HTML checkbox on/off detection in JavaScript

I have made a solar system simulation and have some 'settings' which the user can change. I have made it so the settings only update when the save button is pressed. This works and the bodies are hidden if a box is checked but say for example, i checked mercury and saved the changes then wanted to check Venus as well when i save the changes Venus is hidden but Mercury is shown again. how can i make it so that Mercury stays hidden until the box in uncheked.

(note the check boxes decide whether a planet should be hidden or not so hideMer for example when true would stop drawing mercury onto the canvas)

code which i think the issue applies to:

function animate() {
    //clears canvas each new loop
    if (showPath==false){
        c.clearRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight);
    }

    hideBodies = [hideMer, hideVen, hideEar, hideMar, hideJup, hideSat, hideUra, hideNep];
    drawSun();

    for (var i=0; i< xPosList.length; i++){
        leapfrog(i);
        if (hideBodies[i]==false){
            drawBody(i);
        } 
    }

}

    function saveChanges() {
    showPath=(document.getElementById("showPath").value=="True");
    //Mercury
    if (document.getElementById("mer").checked && hideMer == false){
        hideMer = true;
    } else if (document.getElementById("mer").checked && hideMer == true){
        hideMer = false;
    }
    //Venus
    if (document.getElementById("ven").checked && hideVen == false){
        hideVen = true;
    } else if (document.getElementById("ven").checked && hideVen == true){
        hideVen = false;
    }
    //Earth
    if (document.getElementById("ear").checked && hideEar == false){
        hideEar = true;
    } else if (document.getElementById("ear").checked && hideEar == true){
        hideEar = false;
    }
    //Mars
    if (document.getElementById("mar").checked && hideMar == false){
        hideMar = true;
    } else if (document.getElementById("mar").checked && hideMar == true){
        hideMar = false;
    }
    //Jupiter
    if (document.getElementById("jup").checked && hideJup == false){
        hideJup = true;
    } else if (document.getElementById("jup").checked && hideJup == true){
        hideJup = false;
    }
    //Saturn
    if (document.getElementById("sat").checked && hideSat == false){
        hideSat = true;
    } else if (document.getElementById("sat").checked && hideSat == true){
        hideSat = false;
    }
    //Uranus
    if (document.getElementById("ura").checked && hideUra == false){
        hideUra = true;
    } else if (document.getElementById("ura").checked && hideUra == true){
        hideUra = false;
    }
    //Neptune
    if (document.getElementById("nep").checked && hideNep == false){
        hideNep = true;
    } else if (document.getElementById("nep").checked && hideNep == true){
        hideNep = false;
    }

    console.log(hideMer);
    alert(hideMer);
}

whole code: https://jsfiddle.net/nczpod06/6/

Upvotes: 0

Views: 103

Answers (1)

Jane
Jane

Reputation: 47

In the function save changes for each planet I'm only changing the boolean value when it is checked and not when it is unchecked. To fix this (for example for mercury) I needed to add the not boolean logical operator and then it works... for example:

//Mercury
    if (document.getElementById("mer").checked && hideMer == false){
        hideMer = true;
    } else if (!(document.getElementById("mer").checked) && hideMer == true){
        hideMer = false;
    }

Upvotes: 1

Related Questions