Question

我有问题（或有一些不便）

我在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 {

        }

    }

}

Answer 1

更改按钮的类型，然后将其设置为button

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

由于您已将所有选择的输入都包装在一个表单元素中，因此默认情况下，您的按钮将充当“提交”按钮，单击该按钮会自动提交该表单，从而刷新您正在体验的页面。解决方案将是，如果您不需要将选择按钮包装在表单中，则摆脱表单元素，或者只是将按钮类型更改为“按钮”，这将使其在单击时不提交表单，并且充当独立按钮。

希望有帮助！

Answer 2

您可以做的是防止按钮的默认行为。这可以通过preventDefault（）函数轻松完成。

function Starting(event){
  event.preventDefault();
}

文件不断重新加载

2 个答案: