admin管理员组文章数量:1025251
I'm trying to let the user input a 3-digit number on a text field that appears when "Create Node" button is clicked. Then, print the value of the text field(which is what user keyed in earlier) when "Add" button is pressed. I'm having troubles reading the value from the text field on button click. I'd also like to make sure that the user can only input a 3-digit number and alert "Error" when anything else is entered.
The following is my html tags:
<div id="UI"><b>User Interface</b>
<br>
<br>
<form id="form">
<input type="button" value="Create Node" id="button">
<br>
</form>
</div>
Here's my js codes in my "script" tag:
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);
});
Here's what I've done so far on jsfiddle.
I'm trying to let the user input a 3-digit number on a text field that appears when "Create Node" button is clicked. Then, print the value of the text field(which is what user keyed in earlier) when "Add" button is pressed. I'm having troubles reading the value from the text field on button click. I'd also like to make sure that the user can only input a 3-digit number and alert "Error" when anything else is entered.
The following is my html tags:
<div id="UI"><b>User Interface</b>
<br>
<br>
<form id="form">
<input type="button" value="Create Node" id="button">
<br>
</form>
</div>
Here's my js codes in my "script" tag:
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);
});
Here's what I've done so far on jsfiddle.
Share Improve this question asked Jun 25, 2015 at 6:28 J.JayJ.Jay 2491 gold badge4 silver badges18 bronze badges 4-
why are you using
jqueryfor this statement only$('#form').append(submit);?? – ozil Commented Jun 25, 2015 at 6:37 - I'm using it for other parts that aren't shown here :) – J.Jay Commented Jun 25, 2015 at 6:49
- 1 your javascript is trying to add click event to the "subButton", but at the pageload the id is not avaliable. so your code is not getting executed. check my answer it other way to create element dynamically – kaustubh badamikar Commented Jun 25, 2015 at 6:54
- Of course JavaScript tries to add the click-listener for the subButton first before you can click the "button" and trigger the subbuttion creation.... – dude Commented Jun 25, 2015 at 7:01
3 Answers
Reset to default 2Another way to create element dynamically, probably its not the right way to create.
<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>
Found js syntax errors and you have put the function outside, thats why its not getting node value. Corrected the js code and tested! 100% working,screenshot shown
<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>
I have altered your code and the result is:
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);
});
I'm trying to let the user input a 3-digit number on a text field that appears when "Create Node" button is clicked. Then, print the value of the text field(which is what user keyed in earlier) when "Add" button is pressed. I'm having troubles reading the value from the text field on button click. I'd also like to make sure that the user can only input a 3-digit number and alert "Error" when anything else is entered.
The following is my html tags:
<div id="UI"><b>User Interface</b>
<br>
<br>
<form id="form">
<input type="button" value="Create Node" id="button">
<br>
</form>
</div>
Here's my js codes in my "script" tag:
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);
});
Here's what I've done so far on jsfiddle.
I'm trying to let the user input a 3-digit number on a text field that appears when "Create Node" button is clicked. Then, print the value of the text field(which is what user keyed in earlier) when "Add" button is pressed. I'm having troubles reading the value from the text field on button click. I'd also like to make sure that the user can only input a 3-digit number and alert "Error" when anything else is entered.
The following is my html tags:
<div id="UI"><b>User Interface</b>
<br>
<br>
<form id="form">
<input type="button" value="Create Node" id="button">
<br>
</form>
</div>
Here's my js codes in my "script" tag:
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);
});
Here's what I've done so far on jsfiddle.
Share Improve this question asked Jun 25, 2015 at 6:28 J.JayJ.Jay 2491 gold badge4 silver badges18 bronze badges 4-
why are you using
jqueryfor this statement only$('#form').append(submit);?? – ozil Commented Jun 25, 2015 at 6:37 - I'm using it for other parts that aren't shown here :) – J.Jay Commented Jun 25, 2015 at 6:49
- 1 your javascript is trying to add click event to the "subButton", but at the pageload the id is not avaliable. so your code is not getting executed. check my answer it other way to create element dynamically – kaustubh badamikar Commented Jun 25, 2015 at 6:54
- Of course JavaScript tries to add the click-listener for the subButton first before you can click the "button" and trigger the subbuttion creation.... – dude Commented Jun 25, 2015 at 7:01
3 Answers
Reset to default 2Another way to create element dynamically, probably its not the right way to create.
<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>
Found js syntax errors and you have put the function outside, thats why its not getting node value. Corrected the js code and tested! 100% working,screenshot shown
<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>
I have altered your code and the result is:
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);
});
本文标签： javascriptGet the user input on text field on button clickStack Overflow
版权声明：本文标题：javascript - Get the user input on text field on button click - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745555153a2155830.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论