控制台日志未显示且html不变

时间:2019-03-14 21:43:55

标签: javascript dom

好的,我有问题。由于某种原因,我的JavaScript文件无法跟踪用户在选择标记中选择一个选项时选择“否”类的次数。当用户选择所有9个“否”类并按下按钮时,控制台和ID为“ yos”的p标签的inner-html更改应该假定“ HEY”为其内部html。有人可以告诉我答案吗?

   <!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="quiz" content="myown quiz" />
    <title>Quiz</title>
</head>

<body>
    <script type="text/javascript" src="machine.js"></script>
    <link rel="stylesheet" type="text/css" href="quizformatting.css">
    <h1>Choose the major right for you</h1>
    <pre>
        <form>
        Do you like enjoy programming?
        <select>
            <option class="choice">Select a value</option>
            <option class="program">Yes</option>
            <option class="no">No</option>
        </select>

        Do you enjoy 2d animation and 3d animation?
        <select>
            <option class="choice">Select a value</option>
            <option class="art">Yes</option>
            <option class="no">no</option>
        </select>

        Do you like music
        <select>
            <option class="choice">Select a value</option>
            <option>Yes</option>
            <option class="no">no</option>
        </select>

        What are your favorite pastimes?
        <select>
            <option class="choice">Select a value</option>
            <option class="music">Listening to music</option>
            <option class="program">making websites</option>
            <option class="art">Drawing</option>
            <option class="no">None of these</option>
        </select>

        Out of all the activities you like to do, which one do you enjoy the most?
        <select>
            <option class="choice">Select a value</option>
            <option class="art">Painting and drawing</option>
            <option class="music">Playing instruments</option>
            <option class="art">Drawing</option>
            <option class="no">None of these</option>
        </select>

        Would you be interested in making art or coding for video games?
        <select>
            <option class="choice">Select a value</option>
            <option class="program">I would be interested in learning the programming languages used to create the scripting for games</option>
            <option class="art">I would like to the models and the environment for modeling</option>
            <option class="no">I'm not interested in either of these options</option>
        </select>

        Do you enjoy making websites or learning how to sing?
        <select>
            <option class="choice">Select a value</option>
            <option class="music">Learning how to sing</option>
            <option class="program">making websites for projects</option>
            <option class="no">I'm not interested in any of this</option>
        </select>

        Do you enjoy listening to music more or making programming applications?
        <select>
            <option class="choice">Select a value</option>
            <option class="music">I would like to listen to music</option>
            <option class="program">Programming is my thing</option>
            <option class="art">I'm more of a drawer</option>
            <option class="no">I don't like any of these options</option>
        </select>

        Which skillset are you more interested in learning?
        <select>
            <option class="choice">Select a value</option>
            <option class="music">Learning the notes of instruments</option>
            <option class="program">Learning the language of javascript</option>
            <option class="art">I like anime, so I would love to learn how to animate in anime style</option>
            <option class="no">I don't want to do any of these options</option>
        </select>

        Please press the button to get your answer

        <button type="button" onclick="Starting();">Click me</button>
        </form>

    </pre>
    <p id="yos">Your answer here</p>
</body>

</html>

这是我的JavaScript代码:

function Starting() {

    var artchoices = document.querySelectorAll(".art:checked");
    var program = document.querySelectorAll(".program:checked");
    var choice = document.querySelectorAll(".choice");
    var no = document.querySelectorAll(".no:checked");
    var music = document.querySelectorAll(".music:checked");
    var x = document.getElementById("yos");
    var answer = true;

    for (var e = 0; e < choice.length; e++) {
        if (choice[e].selected == true) {
            answer = false;
            break;
        }
    }


    if (answer == false) {
        console.log("Make sure you checked all values");
    } else {
        if (no == 9) {
            console.log("Oh, so you don't want to become anything huh");
            x.innerHTML = "HEY";
        } else {
            if (program > artchoices) {
                console.log("Congrulations, you are an artist");
            }
        }
    }
    window.onload = Starting;
}

1 个答案:

答案 0 :(得分:-1)

您需要检查列表的长度。节点列表(document.querySelectorAll(".no:checked")返回的值)将永远不等于9。

if (no == 9)

需要成为

if (no.length === 9)