文件不断重新加载

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

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

我在chrome上创建了自己的网页。它假设是一个有十个问题的测验。测验尚未完成,但现在不是问题。问题在于,由于某种原因,每次单击页面末尾附近的按钮时,页面都会刷新。单击按钮时,我不希望页面刷新。这是我的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 onclick="Starting();">Click me</button>
    </form>
    </pre>

</body>

</html>

这是我的样式表文件。

h1 {
    text-align: center;
}

form {
    font-size: 20px;
    text-align: center;
    font-style: italic;
}

button {
    height: 50px;
    width: 100px;
}

这是我的javascript文件:(澄清,现在这不是我现在关注的)

function Starting() {

    var artchoices = document.querySelectorAll(".art");
    var program = document.querySelectorAll(".program");
    var choice = document.querySelectorAll(".choice");
    var no = document.querySelectorAll(".no:checked");
    var music = document.querySelectorAll(".music");

    let 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");

        } else {

        }

    }

}
提问于
用户回答回答于

您可以做的是防止按钮的默认行为。使用preventDefault()函数可以轻松完成此操作。

function Starting(event){
  event.preventDefault();
}
用户回答回答于

将按钮更改为类型,然后将该类型设置为按钮

<button type="button" onclick="Starting()">Click Me</button>

因为您已将所有选择输入包装在表单元素内,所以默认情况下,您的按钮将充当提交按钮,当您单击该按钮时会自动提交该表单,这会导致您正在经历的页面刷新。如果你不需要在表单中包装你的选择按钮,或者只是将你的按钮类型更改为“按钮”,这使得它不会在你点击它时提交表单,解决方案就是去掉表单元素。充当独立按钮。

希望有所帮助!

扫码关注云+社区

领取腾讯云代金券