Appending an array from user input in Javascript

Question

Hey guys I’m pretty new to JavaScript. Long story short is I’m starting a web dev boot camp next week so I can have a career change after the new year. I totally get HTML and CSS, and I’ve done a bit of swift. Anyway Arrays are kind of “that thing” that gets to me, so I thought I would challenge myself by just giving little tasks and seeing if I could do it. This one was appending an array from user input, then displaying it. I’ve been working on it for a while and searched through sample code and other forums and am at a loss. Now I am using a basic text editor as I do these at work during “down time” if you catch my drift so maybe it’s a typo that fresh eyes may catch.

Anyway much appreciate any advice.

<!doctype html>
 <html>
<head>


<meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>


  <body>

  <input id="names" />
 <button id="nameSubmit">Please Enter A Name</button>
<p id="output"></p>


  <script>


  document.getElementById("nameSubmit").onclick = function(); {

 var nameArray = ["Sean", "Ryan", "Amanda"];
 var name = document.getElementById("names").value;

      nameArray.push("name");
       nameArray.ToString();
       document.getElementById("output").innerhtml = nameArray;

  }



   </script>

   </body>

      </html>

In fact you do have a few typos. You have a ; after function which should not be there. Then you should use .toString(); and .innerHTML. Finally you need to use .push(name); and it will work. — Spencer Wieczorek
– Spencer Wieczorek, Commented Oct 7, 2015 at 16:53

epascarello · Accepted Answer · 2015-10-07 16:54:06Z

2

You have some basic mistakes

nameArray.push("name");  //You are pushing the string name, not the variable
nameArray.ToString();    //Does nothing
document.getElementById("output").innerhtml = nameArray;  //there is no innerhtml, case matters.

Should be

nameArray.push(name);  
document.getElementById("output").innerHTML = nameArray.join(",");

Now the issue will have is you declare the array inside of the click so it will always reset. If you do not want it to reset, you would need to move it outside.

var nameArray = ["Sean", "Ryan", "Amanda"];
document.getElementById("nameSubmit").onclick = function() {

  var name = document.getElementById("names").value;
  nameArray.push(name);
  document.getElementById("output").innerHTML = nameArray.join(",");

};

<input id="names" />
<button id="nameSubmit">Please Enter A Name</button>
<p id="output"></p>

edited Oct 7, 2015 at 16:54

answered Oct 7, 2015 at 16:52

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

1 Comment

PsYcHoSiD Over a year ago

Thank you guys so much! Man it's a huge confidence booster to know that it was a few simple syntax errors like case and a ";". I had originally omitted the "" around name, but added it when I thought that was the error. Really appreciate it!

Collectives™ on Stack Overflow

Appending an array from user input in Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related