Fatal编程技术网
  • javascript/
  • Javascript 选择题测验-单选按钮和功能问题

Javascript 选择题测验-单选按钮和功能问题

javascript html forms

Javascript 选择题测验-单选按钮和功能问题,javascript,html,forms,radio-button,Javascript,Html,Forms,Radio Button,我正在尝试使用简单的函数和HTML表单标签中的单选按钮创建一个多项选择测验，但它只允许我在整个测验中检查一个单选按钮，而不是每个问题检查一个单选按钮 <head> <script language="javascript"> var score=0; function checkAll() { function questioncheckOne(){ var correctAnswer = document.getElementById("a3") i

我正在尝试使用简单的函数和HTML表单标签中的单选按钮创建一个多项选择测验，但它只允许我在整个测验中检查一个单选按钮，而不是每个问题检查一个单选按钮

<head>
<script language="javascript">
var score=0;

function checkAll() {

function questioncheckOne(){
    var correctAnswer = document.getElementById("a3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckTwo(){
    var correctAnswer = document.getElementById("b2")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckThree(){
    var correctAnswer = document.getElementById("c4")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckFour(){
    var correctAnswer = document.getElementById("d3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckFive(){
    var correctAnswer = document.getElementById("e3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};

};
</script>
</head>

<body>

<form name ="Where in the world is...?">

<p>

    Question1: Where in the world would you find the Spire? 

</p> 

<input type="radio" name="radio" id="a1" value="a1"  /> Kerry. </input>
<input type="radio" name="radio" id="a2" value="a1"  /> Galway. </input>
<input type="radio" name="radio" id="a3" value="a1"  /> Dublin. </input>
<input type="radio" name="radio" id="a4" value="a1"  /> Donegal. </input>


<p> 


    Question2: Where in the world would you find the Colosseum? 

</p> 


<input type="radio" name="radio" id="b1" value="a2"  /> Taipei. </input>
<input type="radio" name="radio" id="b2" value="a2"  /> Rome. </input>
<input type="radio" name="radio" id="b3" value="a2"  /> Reykjavic. </input>
<input type="radio" name="radio" id="b4" value="a2"  /> Brussels. </input>


<p> 

    Question3: Where in the world would you find the Taj Mahal? 

</p> 


<input type="radio" name="radio" id="c1" value="a3"  /> London. </input>
<input type="radio" name="radio" id="c2" value="a3"  /> Brisbane. </input>
<input type="radio" name="radio" id="c3" value="a3"  /> Paris. </input>
<input type="radio" name="radio" id="c4" value="a3"  /> Agra. </input>


<p> 

    Question4: Where in the world would you find the Parthenon? 

</p> 


<input type="radio" name="radio" id="d1" value="a4"  /> Edinburgh. </input>
<input type="radio" name="radio" id="d2" value="a4"  /> Oslo. </input>
<input type="radio" name="radio" id="d3" value="a4"  /> Athens. </input>
<input type="radio" name="radio" id="d4" value="a4"  /> Pyongyang. </input>


<p> 



    Question5: Where in the world would you find the Niagara Falls? 

</p>


<input type="radio" name="radio" id="e1" value="a5"  /> Hong Kong. </input>
<input type="radio" name="radio" id="e2" value="a5"  /> Moscow. </input>
<input type="radio" name="radio" id="e3" value="a5"  /> New York. </input>
<input type="radio" name="radio" id="e4" value="a5"  /> Ottawa. </input>



<p>

<input type="button" name="submit" id="submit" value="submit" onclick="checkAll()"  /> </input>

</p>


</form>

</body>
</html>
此外，提交按钮没有激活功能
checkAll
，我不知道这是因为我试图做一些不可能的事情，还是因为我错过了一些简单的事情。任何帮助都将不胜感激

代码如下。我对JavasScript和html以及StackOverflow都是新手，如果我在这个问题上做错了什么，我很抱歉

<head>
<script language="javascript">
var score=0;

function checkAll() {

function questioncheckOne(){
    var correctAnswer = document.getElementById("a3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckTwo(){
    var correctAnswer = document.getElementById("b2")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckThree(){
    var correctAnswer = document.getElementById("c4")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckFour(){
    var correctAnswer = document.getElementById("d3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckFive(){
    var correctAnswer = document.getElementById("e3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};

};
</script>
</head>

<body>

<form name ="Where in the world is...?">

<p>

    Question1: Where in the world would you find the Spire? 

</p> 

<input type="radio" name="radio" id="a1" value="a1"  /> Kerry. </input>
<input type="radio" name="radio" id="a2" value="a1"  /> Galway. </input>
<input type="radio" name="radio" id="a3" value="a1"  /> Dublin. </input>
<input type="radio" name="radio" id="a4" value="a1"  /> Donegal. </input>


<p> 


    Question2: Where in the world would you find the Colosseum? 

</p> 


<input type="radio" name="radio" id="b1" value="a2"  /> Taipei. </input>
<input type="radio" name="radio" id="b2" value="a2"  /> Rome. </input>
<input type="radio" name="radio" id="b3" value="a2"  /> Reykjavic. </input>
<input type="radio" name="radio" id="b4" value="a2"  /> Brussels. </input>


<p> 

    Question3: Where in the world would you find the Taj Mahal? 

</p> 


<input type="radio" name="radio" id="c1" value="a3"  /> London. </input>
<input type="radio" name="radio" id="c2" value="a3"  /> Brisbane. </input>
<input type="radio" name="radio" id="c3" value="a3"  /> Paris. </input>
<input type="radio" name="radio" id="c4" value="a3"  /> Agra. </input>


<p> 

    Question4: Where in the world would you find the Parthenon? 

</p> 


<input type="radio" name="radio" id="d1" value="a4"  /> Edinburgh. </input>
<input type="radio" name="radio" id="d2" value="a4"  /> Oslo. </input>
<input type="radio" name="radio" id="d3" value="a4"  /> Athens. </input>
<input type="radio" name="radio" id="d4" value="a4"  /> Pyongyang. </input>


<p> 



    Question5: Where in the world would you find the Niagara Falls? 

</p>


<input type="radio" name="radio" id="e1" value="a5"  /> Hong Kong. </input>
<input type="radio" name="radio" id="e2" value="a5"  /> Moscow. </input>
<input type="radio" name="radio" id="e3" value="a5"  /> New York. </input>
<input type="radio" name="radio" id="e4" value="a5"  /> Ottawa. </input>



<p>

<input type="button" name="submit" id="submit" value="submit" onclick="checkAll()"  /> </input>

</p>


</form>

</body>
</html>


var得分=0；
函数checkAll（）{
函数questioncheckOne（）{
var correctAnswer=document.getElementById（“a3”）
if（correctAnswer.checked==true）{
分数++；
警惕（“正确，您的分数现在是”+分数）
}
否则{
警惕（“错误，你的分数现在是”+分数）
}
};
函数questioncheckTwo（）{
var correctAnswer=document.getElementById（“b2”）
if（correctAnswer.checked==true）{
分数++；
警惕（“正确，您的分数现在是”+分数）
}
否则{
警惕（“错误，你的分数现在是”+分数）
}
};
函数questioncheckThree（）{
var correctAnswer=document.getElementById（“c4”）
if（correctAnswer.checked==true）{
分数++；
警惕（“正确，您的分数现在是”+分数）
}
否则{
警惕（“错误，你的分数现在是”+分数）
}
};
函数questioncheckFour（）{
var correctAnswer=document.getElementById（“d3”）
if（correctAnswer.checked==true）{
分数++；
警惕（“正确，您的分数现在是”+分数）
}
否则{
警惕（“错误，你的分数现在是”+分数）
}
};
函数questioncheckFive（）{
var correctAnswer=document.getElementById（“e3”）
if（correctAnswer.checked==true）{
分数++；
警惕（“正确，您的分数现在是”+分数）
}
否则{
警惕（“错误，你的分数现在是”+分数）
}
};
};

问题1：你到底在哪里能找到塔尖？


克里。
戈尔韦。
都柏林。
多尼格尔。

问题2：你到底在哪里能找到罗马竞技场？


台北。
罗马。
雷克雅未克。
布鲁塞尔。

问题3：你到底在哪里能找到泰姬陵？


伦敦。
布里斯班。
巴黎
阿格拉。

问题4：你到底在哪里能找到帕台农神庙？


爱丁堡。
奥斯陆。
雅典。
平壤。

问题5：尼亚加拉大瀑布在世界何处？


香港。
莫斯科
纽约。
渥太华
您需要使每组单选按钮的
名称
属性唯一。目前，它们都被命名为
radio

至于
checkAll
函数，问题在于您只定义了函数，从未调用它们。在
checkAll
函数中，实际调用您定义的其他函数：

function checkAll() {
    // existing function definitions here

    questioncheckOne();
    questioncheckTwo();
    // etc
}
选中单选按钮时，将取消选中具有相同名称的所有其他按钮。在您的例子中，您希望每个问题的收音机都有一个单独的名称（现在，它们都是“收音机”）

您的
checkAll（）
函数正在运行，但实际上您并没有调用其中的其他check函数；你只要申报就行了。所以看起来好像什么都没有运行。您还需要阻止默认的提交操作。一种方法是在函数末尾返回
false
，你能把它简化为最小的（非）工作示例吗？使用变量，而不是一次又一次地复制函数。我应该在checkAll函数中每个函数的末尾返回false吗？使用变量是否意味着我也必须使用数组，我知道这样会更有效率，但不知道如何编写。