如何在HTML中使用JavaScript实现文本输入表单_Javascript_Jquery_Html_Forms

如何在HTML中使用JavaScript实现文本输入表单

javascript jquery html forms

如何在HTML中使用JavaScript实现文本输入表单,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我正在尝试在HTML的在线考试作业中使用JavaScript。作为项目的一项要求，我们必须使用文本输入表单以及单选按钮等。我已经处理了单选按钮的部分，但由于某些原因，我的文本输入表单无法工作。我的问题将使用主项目中的以下代码片段清楚地说明： <html> <head> <title></title> <script type="text/javascript"> var test, name, matr, myn

我正在尝试在HTML的在线考试作业中使用JavaScript。作为项目的一项要求，我们必须使用文本输入表单以及单选按钮等。我已经处理了单选按钮的部分，但由于某些原因，我的文本输入表单无法工作。我的问题将使用主项目中的以下代码片段清楚地说明：

<html>
<head>
    <title></title>
    <script type="text/javascript">
    var test, name, matr, myname, count = 0;
    function form(){
        test = document.getElementById("test");

        test.innerHTML = "Count = "+count; 

        test.innerHTML += "<form> \
                            First name:<br> \
                        <input type='text' name='name'><br>\
                        <button onclick='check()'>Submit Answer</button>";
    }

    function check(){
        myname = document.getElementsByName("name");
        if (myname[1].value == "myname")
        {
            count++;
        }
        form();
    }
    window.addEventListener("load", form, false);
    </script>
</head>
<body>
    <div id = "test"></div>

</body>
</html>

这段代码的目的是，当用户将myname输入名为“FirstName”的表单并单击“Submit”时，顶部的计数器应该递增

有人能告诉我我做错了什么，以及如何解决这个问题吗。

正如Pluto提到的，javascript中的数组从0开始。您还可以查看对表单元素的修补。它未关闭，也未指定类型、get或post。在下面的示例中，我完全删除了表单，从而使其正常工作。这是因为按下按钮试图提交表单，因此加载新页面

您需要防止onclick事件的默认操作。要执行此操作，请尝试以下操作：

function check(e){
    e.preventDefault();
    myname = document.getElementsByName("name");
    if (myname[0].value == "myname")
    {
        count++;
    }
    form();
}

上面的用户关于javascript数组的起始位置也是正确的。如果要在多行上使用字符串，需要结束当前字符串并使用字符串连接运算符+。另外，在Javascript中数组的索引从0开始，因此您需要使用myname[0]或可能使用myname[count]。@Pluto新行也可以像在操作代码中一样转义

function check(e){
    e.preventDefault();
    myname = document.getElementsByName("name");
    if (myname[0].value == "myname")
    {
        count++;
    }
    form();
}