Question

I am trying to add elements to an array via a form. I am using the unshift() method. The code below doesn’t work and I would like to know why.

<form>
<input id="input"> </input>
<input type = "button" id="button"> Click me </input>
</form>


<script>

var input = document.getElementById("input").value;
var button = document.getElementById("button");

var myArray = [];
myArray.unshift(input);



button.onclick = function alerted (){
alert(myArray);
};


</script>

Answer 1

Your quoted code runs immediately when the page is loaded. The form field won’t have anything in it then, so its value will be ''. When you alert that, the default toString operation on the array will result in '' and the alert will be blank.

You want to run your unshift code in response to a user event, such as the button being clicked, rather than right away. You can do that by setting input to be the element (remove .value from that line) and then moving your line with unshift into the function you’re assigning to onclick, adding the .value there:

button.onclick = function alerted (){
    myArray.unshift(input.value);
    alert(myArray);
};

Other notes:

1. You never write </input>. Normally you don’t close input tags at all. If you’re writing XHTML (you probably aren’t), you’d put the / within the main input tag like this: <input id="input" />. But again, you’re probably not writing XHTML, just HTML.

2. The value (caption) of an input button goes in its value attribute, not content within opening and closing tags. (You would use opening and closing tags with the button element, not input.)

Taking all of that together, here’s a minimalist update: Live copy | source

<form>
<input id="input"><!-- No ending tag -->
<input type = "button" id="button" value="Click me"><!-- No ending tag, move value where it should be -->
</form>
<script>

var input = document.getElementById("input"); // No .value here
var button = document.getElementById("button");

var myArray = [];

button.onclick = function alerted (){
    myArray.unshift(input.value); // Moved this line, added the .value
    alert(myArray);
};
</script>