JavaScript/HTML/CSS-一页上有多个表单_Javascript

JavaScript/HTML/CSS-一页上有多个表单

javascript

JavaScript/HTML/CSS-一页上有多个表单,javascript,Javascript,我正在尝试用JavaScript、HTML和CSS创建一个简单的网页。该网页生成5个div元素。每个div元素包括一个随机数、文本输入和提交按钮。我下面的代码就是这样做的然后，用户应该能够在文本输入框中输入随机数，并单击提交按钮。脚本应该检查他们输入的答案是否正确我不确定这是否可行？我了解如何为页面上的单个表单编写代码，但本例在单个页面上使用动态生成的5个表单。任何帮助都将不胜感激 <html> <head> <style type="

我正在尝试用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>


#试验{
宽度：250px；
填充：10px；
边框：5px纯灰；
利润率：10px；
}
对于（i=0；i<5；i++）{
文件。写（“”）；
var ranNum=Math.floor（Math.random（）*10）；
文件写入（ranNum）；
文件。写（“输入上面的数字：”；
文件。填写（“”）；
文件。写（“”）；
}

您甚至不需要与服务器交互来检查答案是否正确。所以，是的，你很容易做到。使用jquery，将这些数字属性设置为全局对象，属性以输入的

#id

命名，因此当用户单击时，只需将输入值与同名全局对象的属性进行比较

例如：

以此类推，最好将随机数代码放入函数并调用它为每一个属性提供了一个属性

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

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

$（“div.div1”）.append（“+myObject.div1+”）；

或者你甚至可以创建一个循环来完成它，这样你就不需要为所有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 }
});

$（“div.div1”）。查找（“提交”）。单击（函数（）{
//在这里，您从表单中收集数据，懒得输入
//并测试它是否与相应的myObject.div1相等
//或者使用注释中指出的中的值，确保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!");
    }
}

（i=0；i<5；i++）的{
文件。写（“”）；
var ranNum=Math.floor（Math.random（）*10）；
文件写入（ranNum）；
文件。写（“输入上面的数字：”；
文件。填写（“”）；
文件。写（“”）；
}
功能检查应答（元素）{
var thisAnswer=element.form.parentElement.textContent.substring（0,1）；
var answerGiven=element.form.children[0].value；
如果（此答案==答案已给出）{
警惕（“正确！”）；
}否则{
警惕（“错误！”）；
}
}
为了在不重新加载页面的情况下提交每个表单，请使用AJAX。您是说要在客户端用JavaScript测试输入的值，而不提交到web服务器吗？请注意，您不应该有多个元素具有相同的id
，因此，如果您在循环中创建元素，可能需要附加循环计数器to每个id
的结尾，以便它们是唯一的。如果您使用#test
来设置div的样式，我建议将其更改为使用类名
和.test{…}
.FWIW，页面上只能有一个名为test的ID。可能在type wrapper div上使用类名，或者将迭代索引花费在ID上。（表单的ID也是如此）--编辑nnnn-beat-New。我想我在手机上的响应时间太长了。：-）
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!");
    }
}