0

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!

5
  • 1
    What you've written should work fine on Chrome and Firefox, but not on IE. Which browser are you using? Commented Oct 29, 2019 at 19:47
  • works fine with provided code , i think someother code is causing issue - codepen.io/nagasai/pen/KKKXMgM Commented Oct 29, 2019 at 19:52
  • I am using Chrome and for whatever reason it is not working Commented Oct 29, 2019 at 19:53
  • @nbt27, any console errors ? Commented Oct 29, 2019 at 19:54
  • I was actually able to get the code to work. I think some of the unfinished code in the document was interfering with the code I made. Thank you for the help! Commented Oct 29, 2019 at 20:08

3 Answers 3

1

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...

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

1 Comment

Well, you don't need to use .getElementById(). That's just one way of doing it.
1

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.

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.