点击按钮

Question

我试图让用户在＆＃34;创建节点＆＃34;出现的文本字段上输入一个3位数的数字。单击按钮。然后，当＆＃34;添加＆＃34;时，打印文本字段的值（这是之前键入的用户）。按下按钮。我在按钮点击时从文本字段中读取值时遇到麻烦。我还想确保用户只能输入一个3位数字并提醒“＃34;错误＆＃34;何时输入其他内容。

以下是我的html标签：

  <div id="UI"><b>User Interface</b>
        <br>
        <br>
        <form id="form">
            <input type="button" value="Create Node" id="button">
            <br>
        </form>
    </div>

这是我的＆＃34;脚本＆＃34;中的我的js代码标记：

 document.getElementById("button").addEventListener('click', function () {
    var text = document.createElement('input');
    text.setAttribute("type", "text");
    text.setAttribute("id", "nodeID");
    text.setAttribute("maxlength", "3");
    text.setAttribute("size", "6");
    text.setAttribute("placeholder", "Enter Node ID");
    var form = document.getElementById("form");
    form.appendChild(text);
    var submit = document.createElement('BUTTON');
    var t = document.createTextNode("Add");
    submit.appendChild(t);
    submit.setAttribute("id", "subButton");
    $('#form').append(submit);
});
document.getElementById("subButton").addEventListener('click', function () {
    var x = document.getElementByID("nodeID");
    console.log(x.value);
});

这是我迄今为止jsfiddle所做的事情。

Answer 1

另一种动态创建元素的方法，可能不是正确的创建方式。

<script type="text/javascript">
   document.getElementById("button").addEventListener('click', function () {
   var str = '<input type="text" id="nodeID" maxlength="3" size="6" placeholder="Enter Node ID">';
   $('#form').append(str);
   str = '<button id="subButton" onclick="getvalues(event)">Add</button>';
   $('#form').append(str);

});
function getvalues (e) {
   e.preventDefault();
   var x = document.getElementById("nodeID");
    console.log(x.value);
}
</script>

Answer 2

发现了js语法错误并且你把函数放在了外面，这就是为什么它没有得到节点值。更正了js代码并进行了测试！ 100％正常工作，屏幕截图显示为

    <script>
        document.getElementById("button").addEventListener('click', function () {
            var text = document.createElement('input');
            text.setAttribute("type", "text");
            text.setAttribute("id", "nodeID");
            text.setAttribute("maxlength", "3");
            text.setAttribute("size", "6");
            text.setAttribute("placeholder", "Enter Node ID");
            var form = document.getElementById("form");
            form.appendChild(text);
            var submit = document.createElement('BUTTON');
            var t = document.createTextNode("Add");
            submit.appendChild(t);
            submit.setAttribute("id", "subButton");
            submit.setAttribute("type", "button");
            $('#form').append(submit);

            document.getElementById("subButton").addEventListener('click', function () {
                var x = document.getElementById("nodeID");
                console.log(x.value);
            });

        });

    </script>

Answer 3

我更改了您的代码，结果是：

 document.getElementById("button").addEventListener('click', function () {
    var text = document.createElement('input');
    text.setAttribute("type", "text");
    text.setAttribute("id", "nodeID");
    text.setAttribute("maxlength", "3");
    text.setAttribute("size", "6");
    text.setAttribute("placeholder", "Enter Node ID");
    var form = document.getElementById("form");
    form.appendChild(text);
    var submit = document.createElement('BUTTON');
    var t = document.createTextNode("Add");
    submit.appendChild(t);
    submit.setAttribute("id", "subButton");
    submit.setAttribute("type", "button");
    submit.addEventListener('click', function () {
        if (isNaN(text.value)) {
            console.log("Error Message");
        }
        else {
            console.log(text.value);
        }
    });
    form.appendChild(submit);
});