Learning about arrays in JS

JavaScript
1

I made a form to accept input:

<div>
<form id="formColor" method="POST" action="TestingHTML.html">
<p>Add new color:<br />
<input name="newColorInput" type="text" value="">
<input type="submit" value="GO" onClick="sampleArray()">
</p>
</form>
</div>

I have JS to put the input into an array and show it in the console:

function sampleArray() {
    "use strict";
// make array
	var colors2 = [];
// obtain new array item from form
	var form = document.getElementById('formColor');
	var newColorInput = formColor.newColorInput.value;
	var newColor = newColorInput;
	colors2.push(newColor);
console.log ("new color = " + newColor);
</script>

Then I added to just above </body>:

<script>
/* execute the functions */
sampleArray();
</script>

When I enter a word, it merely flashes briefly on the screen and console. How do I code to get the word to remain in the array so it stays on the screen?

2

Hi Steven,

The problem is that you’re not preventing the form from being submitted, which is why the screen refreshes and your console output disappears. Try this:

(function(){
	"use strict";

	var colors = [],
		form = document.getElementById('formColor');

	form.addEventListener("submit", function(e) {
	        e.preventDefault(); // prevents the form from submitting
		var newColor = formColor.newColorInput.value;
		colors.push(newColor);
		console.log ("new color = " + newColor);
		console.log (colors.join(', '));
	}, false);
})();

This attaches a submit handler to form, so you don’t need that inline onClick="sampleArray()" JS in your HTML markup. I’ve also outputted the contents of the array as a string each time, so you can see that the colours are being added.

3

Hi there,

Well, what is causing your immediate problem is the fact that the form is submitting, hence the results being only displayed briefly on the console.

You can normally solve this by passing a reference to the event that triggered the function to the function and preventing the browser’s default action:

function someFunction(e) {
  e.preventDefault(); 
  ...
}

However, you have attached a click handler to a button within the form and this is going to trigger the submit regardless.

… and there is a better way to do this:

Remove the inline click event handler and attach a submit event handler to the form unobtrusively:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form submit</title>
  </head>

  <body>

  <div>
    <form id="formColor" method="POST" action="TestingHTML.html">
      <p>Add new color:<br />
        <input name="newColorInput" type="text">
        <input type="submit" value="GO">
      </p>
    </form>
  </div>

    <script>
      function getColour(e) {
        e.preventDefault();
        var newColor = this.newColorInput.value;
        console.log ("new color = " + newColor);
      }

      var form = document.getElementById('formColor');
      form.addEventListener("submit", getColour, false);
    </script>
  </body>
</html>

I know it might seem like a bit of a hefty read, but I really recommend this: An Introduction To DOM Events

If you have any questions, just let me know.

4

fretburner, That code looks a bit advanced for my current stage, but thanks!

5

What are you having trouble with?
The code I posted is only five lines long, so we could step through it if you like.

Edit:

Ok, you added the word “fretburner” :slight_smile:

6

The sample code works great! I just wasn’t introduced to the e.preventDefault(); in the book yet, so your code threw me off. I have another question about this code, but I’ll put it in another post because it’s different.