java - JavaScript 中的错误消息

标签 java jquery html

所以,我的 HTML 代码中有两个问题。提交按钮后,我的代码应该在指定的数字之后显示问题#1和#2是否正确。但是“msg”只打印在问题#1上。如何在两个号码上打印“msg”?任何帮助将不胜感激。谢谢!

<html>
<head>
<script>



function checkAnswers(){
    var retval = false;
    for(i=0;i<document.myForm.q.length;i++){
        if(document.myForm.q[i].value == "yes" && document.myForm.q[i].checked == true){
            retval = true;
        }
    }

        if(retval== true){
            document.getElementById("msg").innerHTML="Correct Answer!";
        }
        else if(retval == false){
            document.getElementById("msg").innerHTML="Wrong Answer!";
        }

}
</script>
</head>
<body>
    <form action="#" onsubmit="return checkAnswers(this)" name="myForm">
    <h1>QUESTIONS<h1>
    <h3>Question No. 1.) </h3> What is the world's number 1 shampoo?<br />
    <input name="one" type="radio" value="yes" id="q"/>A. Hi</br>
    <input name="one" type="radio" value="no"  id="q"/>B. Hello</br>
    <input name="one" type="radio" value="no"  id="q"/>C. Ahh</br>
    <input name="one" type="radio" value="no"  id="q" />D. Kitkat</br>
    <span id="msg"></span>
    <br />
    <h3>Question No. 2.) </h3> What is the world's number 1 shampoo?<br />
    <input name="two" type="radio" value="no" id="q"/>A. Hi</br>
    <input name="two" type="radio" value="yes"  id="q"/>B. Hello</br>
    <input name="two" type="radio" value="no"  id="q"/>C. Ahh</br>
    <input name="two" type="radio" value="no"  id="q" />D. Kitkat</br>
    <span id="msg"></span>

    <input type="submit" name='submit' value="Submit">
    <br />
    <span id="score"></span><br />
</form> 
</body>
</html>

最佳答案

See this fiddle!

我将您的 id="msg"更改为 name="msg",请查看下面的 javascript 以了解原因! (而且因为多个元素具有相同的 id 并不是一个好主意)

我删除了 id="q"因为我们已经可以在没有它的情况下获得所有广播!

<!-- No need to pass 'this' inside checkAnswers because we won't use it ! -->
<form action="#" onsubmit="return checkAnswers()" name="myForm">
     <h1>QUESTIONS<h1>
    <h3>Question No. 1.) </h3> What is the world's number 1 shampoo?<br />
    <input name="one" type="radio" value="yes"/>A. Hi</br>
    <input name="one" type="radio" value="no"/>B. Hello</br>
    <input name="one" type="radio" value="no"/>C. Ahh</br>
    <input name="one" type="radio" value="no"/>D. Kitkat</br>
    <span name="msg"></span>
    <br />
    <h3>Question No. 2.) </h3> What is the world's number 1 shampoo?<br />
    <input name="two" type="radio" value="no"/>A. Hi</br>
    <input name="two" type="radio" value="yes"/>B. Hello</br>
    <input name="two" type="radio" value="no"/>C. Ahh</br>
    <input name="two" type="radio" value="no"/>D. Kitkat</br>
    <span name="msg"></span>

    <input type="submit" name='submit' value="Submit">
    <br />
    <span id="score"></span><br />
</form>

这是你的js,我们创建一个唯一的 radio 名称列表,然后检查它们的值并显示结果:

function checkAnswers() {
    var retval;

    //This gets all radio !
    var listRadio = document.querySelectorAll('input[type="radio"]');

    //We need to loop only each group, not every radio
    //This array will hold all the unique names !
    var listNameRadioGroup = new Array();

    //We loop all radio, when the name is not in the array, we add it
    for (var i = 0; i < listRadio.length; i++) {
        if (listNameRadioGroup.indexOf(listRadio[i].name) === -1)
            listNameRadioGroup.push(listRadio[i].name);
    }

    //Then we only need to loop this new array to test each group
    for (i = 0; i < listNameRadioGroup.length; i++) {

        //We can access the value of the radio with .value on the element
        //listNameRadioGroup[i] will return the current name to test
        if (document.myForm[listNameRadioGroup[i]].value == "yes") {
            retval = true;
            //because msg is now a name, we can use getElementsByName and they will be in order !
            //So we set the value to correct
            document.getElementsByName("msg")[i].innerHTML = "Correct Answer!";
        }
        else {
            retval = false;
            document.getElementsByName("msg")[i].innerHTML = "Wrong Answer!";
        }

    }

    return retval;

}

关于java - JavaScript 中的错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29781160/

相关文章:

java - Eclipse 找不到/加载主类

java - 尝试为我的程序发出错误消息

javascript - 如何在具有不同高度的两个元素之间同步滚动

html - 版 block 导航

html - 打印 HTML DIV 的内容

java - 切换 MediaView 不起作用

javascript - 将输入标签限制为最多 5 个

jquery - 在haml条件下使用jquery元素

html - 如何在 Cocos2D javascript 中播放音频

java - Android Eclipse v.20 不生成 R.java