Question

我正在尝试动态创建提交表单。但是点击提交按钮后，我在下一行收到错误。

var name = document.getElementById("form").value;

以下是完整的代码。

脚本

function createPage() {
    function form() {
        var form = document.createElement("form");
        form.setAttribute('method', "post");
        form.appendChild(document.createTextNode("Hi, my name is "));

        function input() {
            var input = document.createElement("input");
            input.setAttribute('type', "text");
            input.setAttribute('name', "name");
            return input;
        }

        form.appendChild(input());

        function button() {
            var button = document.createElement("button");
            button.appendChild(document.createTextNode("Submit"));

            function submit() {
                var name = document.getElementById("form").value;
                alert("My name is " + name);
            }

            button.onclick = submit;
            return button;
        }

        form.appendChild(button());
        return form;
    }
    document.body.appendChild(form());
}

HTML

<body onload="createPage()"></body>

Answer 1

您没有为android:exported ="false"元素设置ID。试试吧：

<form>

或者将访问此元素的方法更改为：

form.setAttribute('id', 'form');

Answer 2

您没有设置您创建的表单元素的ID。

因此，在设置方法属性后，只需将表单ID添加为

即可

{{1}}

Answer 3

正如其他人指出的那样，您还没有设置表单ID。 createElement()不会将字段的ID设置为元素本身的名称。

document.createElement("form");创建<form></form>。如您所见，没有id，您必须手动设置它。

但你真的不想访问表单的值，而是输入字段之一。

首先，在输入字段中设置一个id：input.setAttribute('id', 'name');

然后，访问该ID以获取值：

var name = document.getElementById("name").value;

＆＃13;

<html>
    <head>
        <script type="text/javascript">
            function createPage() {
                function form() {
                    var form = document.createElement("form");
                    form.setAttribute('method', "post");
                    form.appendChild(document.createTextNode("Hi, my name is "));
                    function input() {
                        var input = document.createElement("input");
                        input.setAttribute('id', 'name');
                        input.setAttribute('type', "text");
                        input.setAttribute('name', "name");
                        return input;
                    }
                    form.appendChild(input());
                    function button() {
                        var button = document.createElement("button");
                        button.appendChild(document.createTextNode("Submit"));
                        function submit() {
                            var name = document.getElementById("name").value;
                            alert("My name is " + name);
                        }
                        button.onclick = submit;
                        return button;
                    }
                    form.appendChild(button());
                    return form;
                }
                document.body.appendChild(form());
            }
        </script>
    </head>
    <body onload="createPage()">
    </body>
</html>

＆＃13;

Answer 4

您可以尝试使用此代码解决此问题，

<html>
<head>
    <script type="text/javascript">
        function createPage() {
            function form() {
                var form = document.createElement("form");
                form.setAttribute('method', "post");
                form.appendChild(document.createTextNode("Hi, my name is "));
        var input;                    
    function input() {
                    input = document.createElement("input");
                    input.setAttribute('type', "text");
                    input.setAttribute('name', "name");
                    return input;
                }
                form.appendChild(input());
                function button() {
                    var button = document.createElement("button");
                    button.appendChild(document.createTextNode("Submit"));
                    function submit() {
                        var name = input.value;
                alert("My name is " + name);
                    }
                    button.onclick = submit;
                    return button;
                }
                form.appendChild(button());
                return form;
            }
            document.body.appendChild(form());
        }
    </script>
</head>
<body onload="createPage()">
</body>

为什么document.getElementById返回null？

脚本

HTML

4 个答案: