2

我正在尝试用 JavaScript、HTML 和 CSS 创建一个简单的网页。网页生成 5 个 div 元素。每个 div 元素包括一个随机数、文本输入和提交按钮。我下面的代码就是这样做的。

然后用户应该能够在文本输入框中输入随机数并单击提交按钮。脚本应该检查他们是否输入了正确的答案。

我不确定这是否可能？我了解如何为页面上的单个表单编写代码，但此示例在单个页面上使用 5 个动态生成的表单。任何帮助将不胜感激。

    <html>
    <head>

    <style type="text/css">
       #test {
           width:250px;
            padding:10px;
            border:5px solid gray;
            margin:10px;

        }
     </style>

    </head>

    <body>
    <script>

    for (i = 0; i < 5; i++) {

        document.write('<div id="test">');
        var ranNum = Math.floor(Math.random()*10);
        document.write(ranNum);
        document.write("<p>Enter the number above:</p>");
        document.write("<form id=\"form1\" name=\"form1\" method=\"post\" action=\"\"><input type=\"text\" name=\"answer\" id=\"answer\" /><input type=\"submit\" name=\"button\" id=\"button\" value=\"Submit\" /></form>");
        document.write('</div>');
    }

    </script>
    </body>
    </html>
4

2 回答 2

1

您甚至不与服务器交互来检查它是否是正确的答案。所以，是的，你可以很容易地做到这一点。#id使用jquery，将这些数字属性设置为全局对象，以您的输入命名的属性，因此当用户单击时，只需将输入的值与具有相同名称的全局对象的属性进行比较。

例如：

window.myObject = {}

myObject.div1 = // your code for random number
myObject.div2 = // again, code for random number

依此类推，最好将您的随机数代码放入一个函数并为每个属性调用它。

然后只需将 div 值设置为属性：

$("div.div1").append("<span class='value'>" + myObject.div1 + "</span>");

或者甚至您可以创建一个循环来执行此操作，这样您就不需要为所有 div 键入它。

之后，测试您的输入：

$("div.div1").find("submit").click(function(){
    // here you collect the data from your form, lazy to type
    // and test it for equality with coresponding myObject.div1 
    // or with the value in <span class="value>
    //e.g.
    if ($(this).parent().find(".mytextinput").val() == $(this).parent().find("span.value").val())
        { //do something} else {//do something else }
});

当然，这假设您可以使用 jquery。

于 2012-11-15T02:11:34.593 回答
0

正如评论中所指出的，确保 id 始终是唯一的。我不会将 ajax 用于这么简单的事情，您可以检查客户端的值。请参阅下面的工作解决方案。

for (i = 0; i < 5; i++) {
    document.write('<div id="div-' + i + '">');
    var ranNum = Math.floor(Math.random()*10);
    document.write(ranNum);
    document.write("<p>Enter the number above:</p>");
    document.write("<form id=\"form-" + i + "\" name=\"form-" + i + "\"><input type=\"text\" name=\"answer\" id=\"answer-" + i + "\" /><input type=\"submit\" name=\"button\" id=\"button-" + i + "\" value=\"Submit\" onclick=\"checkAnswer(this); return false;\"/></form>");
    document.write('</div>');
}
function checkAnswer(element) {
    var thisAnswer=element.form.parentElement.textContent.substring(0,1);
    var answerGiven=element.form.children[0].value;
    if (thisAnswer==answerGiven) {
        alert("correct!");
    } else {
        alert("wrong!");
    }
}
于 2012-11-15T02:16:17.960 回答