Question

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

<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>

Answer 1

See this fiddle!

我改变了你的身份=＆＃34; msg＆＃34;要命名=＆＃34; msg＆＃34;，请查看下面的javascript以了解原因！（并且因为具有相同id的多个元素并不是一个好主意）

我删除了id =＆＃34; q＆＃34;因为我们已经可以在没有它的情况下获得所有收音机了！

<!-- 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，我们创建一个唯一的无线电名称列表，然后检查它们的值并显示结果：

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;

}

Answer 2

//我已经对您的代码进行了一些编辑，就在这里。在您的代码中，如果您选择了正确的答案，并且您更改了它，那么＆＃34; msg＆＃34;不会改变。它仍然是＆＃34;正确答案！＆＃34;即使这是一个错误的答案。但谢谢你的帮助！

<html>
<head>
<script>


function checkAnswers(){
    var retval = false;
    var inputs = document.getElementsByTagName('input');

    for(i=0;i<inputs.length;i++){

        var inputName = inputs[i].getAttribute('name');            
        var msg = document.getElementById('msg-' + inputName);

        if(inputs[i].value == "yes" && inputs[i].checked == true){
            msg.innerHTML = 'Correct Answer!';      
        }
                else if(inputs[i].value == "yes" && inputs[i].checked != true){
                        msg.innerHTML = 'Wrong Answer!';
                }

    }
   return false;
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return checkAnswers()">
    <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 id="msg-one"></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 id="msg-two"></span>
     <br/>
    <input type="button" name='submit' value="Submit"  />
</form>



</body>
</html>

Answer 3

平时你不会把两次相同的id但......你的javascript / jquery需要看起来像这样：

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){
            $("span[id=msg]")[i].innerHTML="Correct Answer!";
        }
        else if(retval == false){
            $("span[id=msg]")[i].innerHTML="Wrong Answer!";
        }
    }
}

因为你需要在你的html中循环所有的msg范围并指向它们。

Javascript中的错误消息

3 个答案: