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.

• javascript
• html
• button
• input
• click

• why are you using jquery for 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 3

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