棘手的javascript逻辑

Question

我想问一些棘手的 javascript，这是关于 if/else if/else 的问题。 我想对“是”或“否”提出问题，这就是逻辑：如果问题 1 是“是”，问题 2 是“是”，问题 3 是“否”，结果是“好”，如果问题 1 是“是”问题 2 是“否”，问题 3 是“是”，结果是“不好”。我正在为这种情况编写代码但无法正常工作，这是我的代码，我在 html 中使用复选框来选择答案：

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>

我的代码在任何情况下总是打印出“好”，请帮忙。

Answer 1

我实际上对您提出的逻辑感到非常困惑。正如许多人指出的那样，您正在尝试将元素相互比较。这不会给你你想要的结果。根据元素类型，您需要使用 .innerHTML 或 .value。

我看到的下一个问题是您的 HTML 结构，问题和答案没有以任何方式相互关联。

我看到的另一个问题是在声明 JS 变量时。您正在尝试链接您的声明，这很好。尽管您需要使用, 而不是;。 ; 应该只在要声明的最后一个。

我认为这些问题中的大多数只是来自您给我们一些示例代码。我希望您的真实代码看起来不像这样，或者您的问题中会出现其他问题。

无论如何，我有一个解决方案给你。我以一种对我更有意义的方式重写了它：

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>

我做了 2 处更改。我摆脱了<p> 元素，转而使用<label>。然后我将复选框更改为单选按钮。

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;
}

如您所见，我对这个做了很多更改。我想在所选答案和预期之间做出更好的映射。

• 然后我们遍历并抓取页面上的所有输入。在第一个循环中，我们确保我们只接受radio 按钮并且只查看那些已经被checked 或选中的按钮。我们将它们填充到数组tmpSelected 中。
• 然后我们将tmpSelected 的值分配给我们的question 对象，特别是.selected。这样可以很容易地与预期的答案进行比较。
• 然后我们将调用一个不同的函数来验证结果（这个逻辑可以保留在之前的函数中，我只是想将它们拆分一下，使它们更加模块化）。
• validateResults() 简单地将.selected 与.expected 进行比较。如果它们不匹配，我们break 我们的循环并返回'Not Good' 的status。否则我们会继续评估。我这样做是因为您的代码似乎只是返回了成功/失败类型的消息，而不一定说明哪些答案不正确。

结果已正确记录到控制台。所以你只需要把它改回你的document.write()。

Answer 2

在每种情况下都尝试使用它：

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

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

从简单开始，逐步积累。