Javascript 在单击按钮时获取文本字段上的用户输入_Javascript_Html_Button_Input_Click

Javascript 在单击按钮时获取文本字段上的用户输入

javascript html button input

Javascript 在单击按钮时获取文本字段上的用户输入,javascript,html,button,input,click,Javascript,Html,Button,Input,Click,我试图让用户在单击“创建节点”按钮时出现的文本字段上输入一个3位数的数字。然后，当按下“添加”按钮时，打印文本字段的值（这是用户先前键入的内容）。在单击按钮时，从文本字段读取值时遇到问题。我还想确保用户只能输入一个3位数的数字，并在输入任何其他内容时发出“错误”警报以下是我的html标记： <div id="UI"><b>User Interface</b> <br> <br> &l

我试图让用户在单击“创建节点”按钮时出现的文本字段上输入一个3位数的数字。然后，当按下“添加”按钮时，打印文本字段的值（这是用户先前键入的内容）。在单击按钮时，从文本字段读取值时遇到问题。我还想确保用户只能输入一个3位数的数字，并在输入任何其他内容时发出“错误”警报

以下是我的html标记：

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

以下是我到目前为止所做的。

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

<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>


document.getElementById（“按钮”）.addEventListener（'click'，函数（）{
var-str=''；
$（'形式'）.append（str）；
str='Add'；
$（'形式'）.append（str）；
});
函数getvalues（e）{
e、 预防默认值（）；
var x=document.getElementById（“nodeID”）；
console.log（x.value）；
}

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

<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>


document.getElementById（“按钮”）.addEventListener（'click'，函数（）{
var-str=''；
$（'形式'）.append（str）；
str='Add'；
$（'形式'）.append（str）；
});
函数getvalues（e）{
e、 预防默认值（）；
var x=document.getElementById（“nodeID”）；
console.log（x.value）；
}

发现js语法错误，您已将函数放在外部，这就是它无法获取节点值的原因。更正了js代码并进行了测试！100%工作，显示屏幕截图

发现js语法错误，并且您已将函数放在外部，这就是它无法获取节点值的原因。更正了js代码并进行了测试！100%工作，显示屏幕截图

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

 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);
});

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

 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);
});

为什么只对该语句使用

jquery

（“#表单”）。追加（提交）？我将其用于此处未显示的其他部分：）您的javascript试图将单击事件添加到“子按钮”，但在页面加载时，id不可用。所以你的代码没有被执行。检查我的答案它以其他方式创建元素动态当然JavaScript会先尝试为子按钮添加click listener，然后才能单击“按钮”并触发子按钮创建……为什么您仅对该语句使用

jquery

（“#表单”）。append（submit）？我将其用于此处未显示的其他部分：）您的javascript试图将单击事件添加到“子按钮”，但在页面加载时，id不可用。所以你的代码没有被执行。检查我的答案它以另一种方式创建元素dynamicallyOf course JavaScript尝试先为子按钮添加单击侦听器，然后才能单击“按钮”并触发子按钮创建。。。。