CODEWITHSUNDEEP
javascripthtml
nbt27
nbt27

Reputation: 61

Need help displaying an array to a few textboxes

I need some help with an assignment I was given. For the assignment, I need to create an array of five names, and display the names in textboxes. I put this array in the script tag, as per the assignment instructions.

var names = ["Jeremy","Arun","Alisa","Rohan","Dana"];

I also put a button in the body of the document,

<button id = "name" onclick = '
    name0.value = names[0];
    name1.value = names[1];
    name2.value = names[2];
    name3.value = names[3];
    name4.value = names[4];
    '>Customer Name</button></th>

When the button is clicked, it is supposed to display names to text boxes, which is displayed in a table. I have provided the code below for the first name in the array.

<td><input type="text" id="name0" size=10 value = ''></td>

Both the text boxes and button are within the body tag if that needs clarification. If you could help me figure out why the names are not displaying, that would help a bunch!

Upvotes: 0

Views: 50

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

What really bothers me is that there are so many people, sites, and tutorials out there that are just fostering bad coding techniques and propping up 20+ year old ways of doing things. If this is an assignment that a teacher has given you, please share the solution below with him/her and politely ask them to learn more about HTML, CSS, and JavaScript and how to write code in the year 2019, rather than 1995.

Ok, with my rant finished, here's a simple solution. See the comments inline.

var names = ["Jeremy","Arun","Alisa","Rohan","Dana"];

// Get a reference to the button and set up a click event handler for it.
// Don't set up events in HTML!
document.querySelector("button").addEventListener("click", function(){

  // Now get all the textboxes into an array and loop over those.
  document.querySelectorAll("input").forEach(function(input, index){
    // Set the value of the current input being looped over to the value
    // of the element in the array with the same index as the input being looped
    input.value = names[index];  
  });

});
/* CSS does styling, not HTML */
input { width: 50px; margin:5px; }
<button id="name">Customer Name</button>

<!-- 
     - The default type for input is "text", so that's not needed.
     - No id's are needed for this solution and ID's should be avoided because
       they create brittle code that doesn't scale.
     - The value will be "" by default, so there's no need to say value="".
     - Sizing is styling and all styling should be done with CSS not HTML. 
     - Tables should not be used for layout (that's CSS' job). They should
       only be used to show tabular data.
-->

<div><input><div>
<div><input><div>
<div><input><div>
<div><input><div>
<div><input><div>

PS: Before anyone feels the need to comment with "Well, it's often better to teach a more simple way of doing something before moving on to more advanced techniques.", let me just say that I have been a professional developer and corporate IT trainer for the last 25 years and my response to that would be to say that it is NEVER a good idea to teach bad coding techniques just because they are easier than the right way.

Upvotes: 1

Shankar
Shankar

Reputation: 3088

you need to use getElementById method here then your value can be set to actual DOM such as 

getElementById("name0").value = names[0];

and so on...

Upvotes: 1

Chris
Chris

Reputation: 1321

You could use appendChild for the table row in order to add the text. In order to use that, however, you have to create a textnode.

for(var j = 0; j < names.length; j++) {
  let row = document.createElement("tr");
  let cell = document.createElement("td");
  let celltext = document.createTextNode(names[j]);
  cell.appendChild(celltext);
  row.appendChild(cell);
}

Or something along those lines, I'm too lazy to make all the for loops, but here is a general example.

Upvotes: 0

Related Questions