if statement - Check if multiple variables are true or false in Javascript - Stack Overflow

admin管理员组

文章数量:1315994

I have a function that deals with checkboxes. I'm on a piece right now that I want to check if 3 variables are equal to each other (either true or false; it doesn't matter) and execute a mand if that is so. I've tried a few different orientations and just can't get it to work.

function dump() {
    var u = document.getElementById("dump").checked;
    var x = document.getElementById("tractor").checked;
    var y = document.getElementById("sweeper").checked;
    var e = document.getElementsByClassName('dump');
    var a = document.getElementsByClassName('tractor');
    var b = document.getElementsByClassName('sweeper');

    for (var i = 0; i < e.length; i++) {
        /*This is the section*/
        if (u==x && x==y)
            e[i].style.display = "block";
            a[i].style.display = "block";
            b[i].style.display = "block";
        /*End*/
        if (u)
            e[i].style.display = "block";
        else
            e[i].style.display = 'none';
        if (x)
            a[i].style.display = "block";
        else
            a[i].style.display = 'none';
        if (y)
            b[i].style.display = "block";
        else
            b[i].style.display = "none";        
    }
} 

SOLVED

My real issue was I needed to move that statement to the end of the function. I also added brackets for good measure.

function dump() {
    var u = document.getElementById("dump").checked;
    var x = document.getElementById("tractor").checked;
    var y = document.getElementById("sweeper").checked;
    var e = document.getElementsByClassName('dump');
    var a = document.getElementsByClassName('tractor');
    var b = document.getElementsByClassName('sweeper');

    for (var i = 0; i < e.length; i++) {
        if (u){
            e[i].style.display = "block";
        }
        else{
            e[i].style.display = 'none';
        }
        if (x){
            a[i].style.display = "block";
        }
        else{
            a[i].style.display = 'none';
        }
        if (y){
            b[i].style.display = "block";
        }
        else{
            b[i].style.display = "none";        
        }
        if (u==x && x==y){
            e[i].style.display = "block";
            a[i].style.display = "block";
            b[i].style.display = "block";
        }
    }
} 

I have a function that deals with checkboxes. I'm on a piece right now that I want to check if 3 variables are equal to each other (either true or false; it doesn't matter) and execute a mand if that is so. I've tried a few different orientations and just can't get it to work.

function dump() {
    var u = document.getElementById("dump").checked;
    var x = document.getElementById("tractor").checked;
    var y = document.getElementById("sweeper").checked;
    var e = document.getElementsByClassName('dump');
    var a = document.getElementsByClassName('tractor');
    var b = document.getElementsByClassName('sweeper');

    for (var i = 0; i < e.length; i++) {
        /*This is the section*/
        if (u==x && x==y)
            e[i].style.display = "block";
            a[i].style.display = "block";
            b[i].style.display = "block";
        /*End*/
        if (u)
            e[i].style.display = "block";
        else
            e[i].style.display = 'none';
        if (x)
            a[i].style.display = "block";
        else
            a[i].style.display = 'none';
        if (y)
            b[i].style.display = "block";
        else
            b[i].style.display = "none";        
    }
} 

SOLVED

My real issue was I needed to move that statement to the end of the function. I also added brackets for good measure.

function dump() {
    var u = document.getElementById("dump").checked;
    var x = document.getElementById("tractor").checked;
    var y = document.getElementById("sweeper").checked;
    var e = document.getElementsByClassName('dump');
    var a = document.getElementsByClassName('tractor');
    var b = document.getElementsByClassName('sweeper');

    for (var i = 0; i < e.length; i++) {
        if (u){
            e[i].style.display = "block";
        }
        else{
            e[i].style.display = 'none';
        }
        if (x){
            a[i].style.display = "block";
        }
        else{
            a[i].style.display = 'none';
        }
        if (y){
            b[i].style.display = "block";
        }
        else{
            b[i].style.display = "none";        
        }
        if (u==x && x==y){
            e[i].style.display = "block";
            a[i].style.display = "block";
            b[i].style.display = "block";
        }
    }
} 

• javascript
• if-statement
• conditional-statements

Share Improve this question Follow edited Dec 7, 2015 at 17:11 Thilina Sampath 3,77377 gold badges4242 silver badges6666 bronze badges asked Jul 23, 2014 at 5:37 user2631279user2631279 12711 gold badge33 silver badges1616 bronze badges 8

• 1 what error you getting? can you create a fiddle. – V31 Commented Jul 23, 2014 at 5:40
• Multi-line ifs need to use curly braces {} – Jake Commented Jul 23, 2014 at 5:40
• 2 Next time you ask a question, please describe the behavior your code produces and the behavior it was intended to produce. "cant get it to work" is vague, making it more difficult for people to figure out what's going on. – user2357112 Commented Jul 23, 2014 at 5:43
• e[i].style.display = u ? "block" : "none"; – epascarello Commented Jul 23, 2014 at 5:49
• By "cant get it to work" i mean its all brokey. I'm working on a jsfiddle to better visualize my issue. Basically if that line is working properly, it will switch a few containers to "display: block;". The containers aren't showing therefore, "its brokey". – user2631279 Commented Jul 23, 2014 at 6:02

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 4

You need braces:

if (u==x && x==y) {
    e[i].style.display = "block";
    a[i].style.display = "block";
    b[i].style.display = "block";
}

Otherwise, the if only attaches to the next statement,

e[i].style.display = "block"; 

The indentation is ignored.

Without curly braces your code will have following behaviour

 if(u==x)
   statement //if condition applies to only first statement
   statement //will act as assignments
   statement //

Hence you should curly braces here

if(ui==x && x==y){
    e[i].style.display = "block";
    a[i].style.display = "block";
    b[i].style.display = "block";
}

I think the problem is you have indenting, not braces:

/*This is the section*/
if (u==x && x==y){
    e[i].style.display = "block";
    a[i].style.display = "block";
    b[i].style.display = "block";
}
/*End*/

The original code would only guard the "e" statement with the if statement and a & b would always execute.

But whatever this does is going to get possibly changed by the following block of if statements based on the individual values of u, x, and y.

本文标签： if statementCheck if multiple variables are true or false in JavascriptStack Overflow