Tricky javascript logic

Question

I wanna ask about little tricky javascript, this is about if/else if/else question. I want make question about 'YES' or 'NO', this is the logic : If question1 is 'yes' and question2 is 'yes' and question3 is 'NO' the result is 'good', and if question1 is 'yes' and question2 is 'no' and question3 is 'yes'the result is 'not good'. I was make the code for this case but not working properly, this is my codes, i use checkbox in html for choice answers :

javascript

<script type="text/javascript">

var question1 = document.getElementById("a");
    question2 = document.getElementById("b");
    question3 = document.getElementById("c");
    answer1 = document.getElementById("d");
    answer2 = document.getElementById("e");
    answer3 = document.getElementById("f");
    answer4 = document.getElementById("g");
    answer5 = document.getElementById("h");
    answer6 = document.getElementById("i");




function TheResult(form){
    if(question1 == answer1 && question2 == answer3 && question3 == answer6 ){
        document.write('good');
    }else if(question1 == answer1 && question2 == answer4 && question3 == answer5  ){
        document.write('not good');
    }else {
        document.write('ERROR');
    }
}

html

<form>
    <p id = "a"><b>Question1</b></p>
        <input type="checkbox" name="a1" value="YES" id = "d">YES
        <input type="checkbox" name="a1" value="NO" id = "e">NO<br><br>
     <p id = "b"><b>Question2</b></p>
        <input type="checkbox" name="a2" value="YES" id = "f" >YES
        <input type="checkbox" name="a2" value="NO" id = "g" >NO<br><br>
     <p id = "c"><b>Question3</b></p>
        <input type="checkbox" name="a3" value="YES" id = "h">YES
        <input type="checkbox" name="a3" value="NO" id = "i">NO<br><br>
        <input type="button" name="Submit" value="Result" style="margin-left:100px;" onClick="TheResult(this.form)" >
    </form>

my codes always print out 'good' in every situation, please help.

Answer 1

I'm actually pretty confused by the logic that you're presenting. As many have pointed out, you're trying to compare elements against each other. This won't give you the result that you want. You'll want to use .innerHTML or .value depending on the element type.

The next problem that I see is that your HTML structure, the Questions & Answers aren't associated with each other in any way.

Another problem I see comes when you are declaring your JS variables. You're trying to chain your declarations, which is fine. Although you need to be using , instead of ;. The ; should only be on the last one to be declared.

I assume most of these problems just came from you giving us some sample code. I expect your real code doesn't look like this, or you'd be having other problems noted in your question.

Regardless, I have a solution for you. I rewrote it in a way that makes more sense to me:

View Demo Here - JSFiddle

HTML:

<form>
    <label for="a1" id="a">Question 1</label>
    <input type="radio" name="a1" value="YES" id="d">YES
    <input type="radio" name="a1" value="NO" id="e">NO
    <br>
    <br>
    <label for="a2" id="b">Question 2</label>
    <input type="radio" name="a2" value="YES" id="f">YES
    <input type="radio" name="a2" value="NO" id="g">NO
    <br>
    <br>
    <label for="a3" id="c">Question 3</label>
    <input type="radio" name="a3" value="YES" id="h">YES
    <input type="radio" name="a3" value="NO" id="i">NO
    <br>
    <br>
    <input type="button" name="Submit" value="Result" style="margin-left:100px;" onClick="theResult()">
</form>

I made 2 changes. I got rid of the <p> elements in favor of <label>. And then I changed the checkboxes to radio buttons.

The JS

function theResult(){
    var inputs = document.getElementsByTagName('input');
    var question = [ {selected: '', expected: 'YES'},
                     {selected: '', expected: 'YES'},
                     {selected: '', expected: 'NO'}
                   ];
    var tmpSelected = [];

    for(var i = 0; i < inputs.length; i++){
        var tmp = inputs[i];
        if(tmp.type == 'radio' && tmp.checked){
            tmpSelected.push(tmp.value);
        }
    }
    for(var i = 0; i < tmpSelected.length; i++){
        question[i].selected = tmpSelected[i];
    }

    validateResults(question);
};

function validateResults(results){
    var status = '';
    for(var i = 0; i < results.length; i++){
        if(results[i].selected != results[i].expected){
            status = 'Not Good'
            break;
        } else {
            status = 'Good';
        }
    }
    console.log(status);
    return status;
}

As you can see, I've made a lot of changes to this one. I wanted to make a better mapping between selected answer & the expected.

• We then go through and grab all the inputs on the page. In the first loop, we make sure that we're only accepting radio buttons & only looking at the ones that have been checked or selected. We stuff those off into an array tmpSelected for a bit.
• Then we assign the values of tmpSelected to our question object, specifically to .selected. This will make it easy to compare against the expected answer.
• Then we'll make a call to a different function to validate the results (this logic could've been kept in the previous function, I just like splitting things up a bit to make them more modular).
• the validateResults() simple compares .selected with .expected. If they don't match, we break our loop and return the status of 'Not Good'. Otherwise we keep evaluating. I did it this way because it seemed like your code was just returning a success/failure type message, and not necessarily saying which answers were incorrect.

The results are correctly logged to the console. So you'd just need to change that back to your document.write().

Answer 2

Try using this in each case:

var question1 = document.getElementById("a").innerHTML;
var answer1 = document.getElementById("d").innerHTML;

if(question1 == answer1 ){
    document.write('good');
}

Start simple and build up.