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

Question

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

该代码的作用是，当用户在名为“ First name”的形式中输入“ myname”并单击“ Submit”时，顶部的计数器应递增。

有人可以告诉我我在做什么错以及如何解决。

Answer 1

如Pluto所述，javascript中的数组从0开始。您还可以考虑对form元素进行修补。 它没有关闭，也没有指定类型，获取或发布。 在下面的示例中，我通过完全删除表格来使其工作。 这是因为按下按钮试图提交表单，因此加载了新页面。

https://jsfiddle.net/jpm68eub/

var test, name, matr, myname, count = 0;
function form() {
    test = document.getElementById("test");
    test.innerHTML = "Count = " + count;
    test.innerHTML += "</br> First name:<br> \
                    <input type='text' name='name'><br>\
                    <button onclick='check()'>Submit Answer</button>";
}

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

Answer 2

您需要阻止onclick事件的默认操作。 为此，请尝试如下操作：

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

上述用户对于javascript数组的起始位置也正确（它们从0开始）

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-04-22 00:14:20

解决方案2
0 2015-04-22 00:27:15

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-04-22 00:14:20

解决方案2 0 2015-04-22 00:27:15

解决方案1
0 已采纳 2015-04-22 00:14:20

解决方案2
0 2015-04-22 00:27:15