Does not append input strings dynamically on the web page

Question

I am new in Javascripting language. I tried to build an application in which , there is one HTML page from which I get single input entry by using Submit button, and stores in the container(data structure) and dynamically show that list i.e., list of strings, on the same page

means whenever I click submit button, that entry will automatically append on the existing list on the same page.

HTML FILE :-

<html>
    <head>
        <script type = "text/javascript" src = "operation_q_2.js"></script>
    </head>
    <body>
        Enter String : <input type= "text" name = "name" id = "name_id"/>
        <button type="button"   onClick = "addString(this.input)">Submit</button>
    </body>
</html>

JAVASCRIPT CODE

var input = [];

function addString(x) {
    var s = document.getElementById("name_id").value;//x.name.value;
    input.push(input);
    var size = input.length;
    //alert(size);
    printArray(size);
}

function printArray(size){
    var div = document.createElement('div');
    for (var i = 0 ; i < size; ++i) {
        div.innerHTML += input[i] + "<br />";
    }
    document.body.appendChild(div);
    //alert(size);
}

Here it stores the strings in the input Array, but unable to show on the web page. Need help please.

Tell me one more thing there is one code on given link. It also not gives desired answer. Please help me overcome from this problem.

<html>
<body>
    <script>
       function addValue(a) {
            var element1 = document.createElement('tr');
            var element2 = document.createElement('td');
            var text = document.createTextNode(a);
            var table = document.getElementById('t');
            element2.appendChild(text);
            element1.appendChild(element2); 
            table.tBodies(0).appendChild(element1);
       }
   </script>
   Name: <input type="text" name="a">
   <input type="button" value="Add" onClick='javascript:addValue(a.value)'>
   <table id="t" border="1">
       <tr><th>Employee Name</th></tr>
   </table>
</body>
</html>

You should use the console : it shows the errors and console.log is much more convenient than alert. This will really make you more efficient. — Denys Séguret
– Denys Séguret, Commented Jan 19, 2013 at 18:05
This code print ` ' ` symbols then after submitting more, number quotes increses by one in every alternative line. Very strange behavior — devsda
– devsda, Commented Jan 19, 2013 at 18:09

user1993515 · Accepted Answer · 2013-01-19 20:29:49Z

3

In your code where you push an item to the end of your input array, you're trying to push the array instead of the value to the array. So if your problem is that your values aren't being appended to the page is because you're trying to append the array that's empty initially onto itself.

So instead of

input.push(input);

It should be

input.push(s);

Since "s" you already declared to be the value from the text field.

And if you're not going to use that parameter you're passing in, I would get rid of it.

References: Javascript Array.Push()

answered Jan 19, 2013 at 20:29

user1993515

Sign up to request clarification or add additional context in comments.

4 Comments

devsda Over a year ago

thanks a lot. I accepted your answer. How silly that mistake is :(

devsda Over a year ago

Tell me about the second question's answer. Why that code is not working ??

user1993515 Over a year ago

Try just table.appendChild(element1); You don't have any <tbody> elements within your table, so tBodies(0) doesn't return anything.

devsda Over a year ago

Now it starts entering value. But that value is UNDEFINED.

Collectives™ on Stack Overflow

Does not append input strings dynamically on the web page

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related