Question

对花生酱和果冻进行简单的多项选择，简短回答和多次回答测验:)。我要做的是当用户点击“提交”按钮时，它会显示正确或错误答案的数量。此外，在问题显示旁边，如果他们选择的选项是正确的还是不正确的，例如在多项选择问题上，如果他们选择了正确的答案（果冻），那么它会说“正确！”旁边的那个选项。现在，当我点击提交时，没有发生任何事情，不知道为什么，我认为它会弹出警报，数量正确但没有任何反应。我确定我错过了一些非常简单的东西，但由于某种原因它没有突然出现，所以任何帮助都将非常感激。谢谢！

        <!DOCTYPE html>
<html lang="en">
<head>  
    <title>
    How to make a proper Peanut Butter and Jelly
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <script src = "scripts/main.js"></script>


</head>  

<body>

    <header>

    </header>   
    <main>
    <form id = "quiz" name = "quiz">

    <p>what item do you use to spread peanut butter on the bread?</p>
    <input id = "textbox" type = "text" name = "question1">

    <p>what is one ingrediant of peanut butter and jelly sandwich?</p>
    <input type = "radio" id = "mc" name = "question2" value = "cheese"> cheese <br>
    <input type = "radio" id = "mc" name = "question2" value = "bacon"> bacon <br>
    <input type = "radio" id = "mc" name = "question2" value = "jelly"> jelly <br>

    <p>which of the following are correct ingredients required to make a Peanut Butter and Jelly sandwich?</p>
    <input type = "checkbox" id = "mc" name = "question2" value = "bread"> bread <br>
    <input type = "checkbox" id = "mc" name = "question2" value = "cheese"> cheese <br>
    <input type = "checkbox" id = "mc" name = "question2" value = "peanut butter"> peanut butter <br>   
    <input type = "checkbox" id = "mc" name = "question2" value = "jelly"> jelly <br>
    <input type = "checkbox" id = "mc" name = "question2" value = "toothpaste"> toothpaste <br>
    <br>

    <input id = "button" type = "button" value = "Submit Quiz" onclick = "check():">
    <br>




    </form>





</main> 



    <footer>

    </footer> 
</body>

javascript代码

    function src(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
var incorrect = 0;

if (question1 == "knife")
{
alert("correct!");
correct++;
}
else{
alert("incorrect");
incorrect++;
}

if(question2 == "jelly")
{
alert("correct!");
correct++;
}
else{
alert("incorrect");
incorrect++;
}
if(question3 == "bread"||"jelly"||"peanut butter"){
alert("correct!");
correct++
}
else{
alert("incorrect");
incorrect;
}

alert(correct);




}

Answer 1

尝试删除冒号：在提交按钮上单击

<input id = "button" type = "button" value = "Submit Quiz" onclick = "check():">

将此更改为

<input id = "button" type = "button" value = "Submit Quiz" onclick = "check()">

Answer 2

现在，您提交的onclick处理程序为check()。但是你没有名为check()的函数。你的意思是

onclick = "src()">

代替？

请注意，您应该将所有Javascript放在Javascript中 - 将处理程序放在HTML中是不好的做法，从长远来看，这只会让您更难。强烈考虑使用addEventListener。

Answer 3

首先，您似乎熟悉其他编程语言。例如C＃或java，但你不知道DOM操作的基础知识。所以现在请耐心等待，直到我向你详细解释。

首先，DOM是（文档对象模型），它基本上是使用标记语言（HTML）创建的图像。基本上这是浏览器上显示的内容并由javascript操纵。比如这个页面上的按钮或我正在输入的文本框或上面的导航栏。

因此，快速回顾一下使用HTML创建DOM并使用javascript进行操作。

由于DOM是由html创建的，因此除非加载html，否则无法对其进行操作。你在html页面的顶部添加脚本标记意味着你运行那些不存在的操作。因此，您必须在主体结束标记之前的html页面末尾添加脚本标记。

   <script src = "scripts/main.js"></script>
</body>

现在，当你想要操作一个元素时，你必须将它存储在一个变量中，这样做的方法是使用一个选择器。

你有三个选择，但为了节省时间，我不会说3我将说明最好和最常用的一个。你可以谷歌其他人，但我不认为这是值得的。

所以，如果你知道css，你可以选择一个名称或id或类的组件。 javascript中有一些叫做查询选择器的东西，就像这样使用。

var x = document.queryselector('css-selector');

而不是css选择器部分，您添加一个CSS选择器。例如，如果元素具有“英雄”类。你将用.hero替换css-selector，或者如果它的id为'hero'，你将用#id替换css选择器。

然后你应该使用变量名来操作元素。

这里有更多有用的链接，您可以查看。 JavaScript

在html / javascript警报中进行测验不起作用

3 个答案: