Want to run an if statement based on prior functions being true or not-CodePudding

whenever I input the names "kanu" and "henry" in the rfInput and lfInput fields the message does not appear (meaning my if statement at the end isn't working).

function rfOption(){
    var rfInput = document.getElementById("rf-name").value;
    var rfPic = document.getElementById("rf-img");

    if(rfInput == "Kanu" || rfInput == "kanu"){
        
        rfPic.src = 'missingMen/Arsenal/Kanu.jpeg'
    } else{
        rfPic.src = 'pictures/questionMark.jpeg'
    }
}

function lfOption(){
    var lfInput = document.getElementById("lf-name").value;
    var lfPic = document.getElementById("lf-img");

    if(lfInput == "Henry" || lfInput == "henry"){
        
        lfPic.src = 'missingMen/Arsenal/Henry.jpeg'
        
    } else{
        lfPic.src = 'pictures/questionMark.jpeg'
    }

    
} 

if(lfOption() && rfOption()){
    document.getElementById("completed").style.display = "block";
}

the code I tried above did not work, the functions seem to be working, as the pictures appear when I type the names. But the if statement at the end does not work.

CodePudding user response：

As you provided not enough information, I assume, that the message should only appear if the names "kanu" and "henry" are provided.

Your functions have to return a true or false value so they can be examined by the if statement.

Your checking functions should look like this:

function rfOption(){
    var returnValue = false;
    var rfInput = document.getElementById("rf-name").value;
    var rfPic = document.getElementById("rf-img");

    if(rfInput == "Kanu" || rfInput == "kanu"){
        returnValue = true;
        rfPic.src = 'missingMen/Arsenal/Kanu.jpeg'
    } else{
        rfPic.src = 'pictures/questionMark.jpeg'
    }

    return returnValue;
}

This shows just one of your functions. The other one should be similar.

CodePudding user response：

I couldn't understand your question perfectly, but I believe you mean that this 'if' didn't work; isn't that right?

if(lfOption() && rfOption()){
    document.getElementById("completed").style.display = "block";
}

I'm not an expert in JS, but lfOptio doesn't return a boolean value as output, and I believe the default when you call it inside an if clause is false.

so changing it to

function rfOption(){
    var rfInput = document.getElementById("rf-name").value;
    var rfPic = document.getElementById("rf-img");

    if(rfInput == "Kanu" || rfInput == "kanu"){
        
        rfPic.src = 'missingMen/Arsenal/Kanu.jpeg'
        return true;
    } else{
        rfPic.src = 'pictures/questionMark.jpeg'
        return false;
    }
}

function lfOption(){
    var lfInput = document.getElementById("lf-name").value;
    var lfPic = document.getElementById("lf-img");

    if(lfInput == "Henry" || lfInput == "henry"){
        
        lfPic.src = 'missingMen/Arsenal/Henry.jpeg'
        return true;
        
    } else{
        lfPic.src = 'pictures/questionMark.jpeg'
        return false;
    }

    
}

would make it work

The image did show, as the function did execute, but the output for the last if condition is false, so of course the last line would not execute.

Also, I'm not sure about JS, but in some languages, there is a concept called 'short circuit' which means for the AND between exp1() and exp2() if exp1 is false it does not execute exp2 at all, as the result will always be false no matter what the output of exp2. So there is a possibility that exp2(which is lfOption in your case) might never execute.