棘手的javascript逻辑

时间:2014-04-03 16:34:16

标签: javascript

我想询问一些棘手的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>

我的代码在任何情况下都会打印出“好”,请帮助。

2 个答案:

答案 0 :(得分:1)

我实际上对你所呈现的逻辑感到困惑。正如许多人所指出的那样,你试图将元素相互比较。这不会给你你想要的结果。您将要使用.innerHTML.value,具体取决于元素类型。

我看到的下一个问题是你的HTML结构,问题&amp;答案不以任何方式相互关联。

当你宣布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按钮&amp;只查看checked或已选择的那些。我们将这些内容填入数组tmpSelected中。
  • 然后我们将tmpSelected的值分配给question对象,特别是.selected。这样可以很容易地与预期答案进行比较。
  • 然后我们将调用另一个函数来验证结果(这个逻辑可以保留在前一个函数中,我只是喜欢将它们分开以使它们更加模块化)。
  • validateResults()简单将.selected.expected进行比较。如果他们不匹配,我们break我们的循环并返回status 'Not Good'。否则我们会继续评估。我是这样做的,因为看起来你的代码只是返回一个成功/失败类型的消息,而不一定说哪些答案是错误的。

结果已正确记录到控制台。因此,您只需将其更改回document.write()

答案 1 :(得分:0)

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

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

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

开始简单并建立起来。