控制台日志没有显示,html没有改变

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (12)

我有一个问题。出于某种原因,我的JavaScript文件没有跟踪用户在select标签中选择选项时选择“no”类的次数。当用户选择所有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;
}
提问于
用户回答回答于

接触dom的javascript代码的入口点是window.onload。在你的情况下,window.onload直到Starting被调用才触及- 大概是,它从未被调用过。

尝试移动函数的最后一行:

window.onload = Starting;
用户回答回答于

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

if (no == 9)

需要是

if (no.length === 9)

扫码关注云+社区

领取腾讯云代金券