Question

我需要一些帮助来完成任务。对于分配，我需要创建一个包含五个名称的数组，并在文本框中显示这些名称。按照分配说明，我将此数组放入了脚本标签中。

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

我还在文档正文中放置了一个按钮，

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

单击该按钮时，它应该在表中显示的文本框中显示名称。我已经为数组中的名字提供了以下代码。

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

如果需要说明，文本框和按钮都在body标签内。如果您可以帮助我弄清楚为什么不显示名称，那会很有帮助！

Answer 1

您需要在此处使用getElementById方法，然后将您的值设置为实际DOM 例如

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

以此类推...

Answer 2

真正令我困扰的是，那里有这么多人，站点和教程，它们只是在培养不良的编码技术，并支持20多年的老方法。如果这是老师给您的任务，请与他/她分享下面的解决方案，并礼貌地请他们学习有关HTML，CSS和JavaScript的更多信息以及如何在2019年而不是1995年编写代码。 / p>

好吧，我的咆哮说完了，这是一个简单的解决方案。查看内联评论。

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：在有人觉得需要发表评论之前，“在继续采用更先进的技术之前，最好教一种更简单的方法来做某事。”，我只想说我曾经是一名专业开发人员，并且公司IT培训师在过去的25年中，对此我的回答是，仅仅因为比正确的方法容易而教坏的编码技术永远不是一个好主意。

Answer 3

您可以在表行中使用appendChild来添加文本。为了使用它，您必须创建一个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);
}

或者类似的东西，我懒得制作所有for循环，但这是一个一般示例。

需要帮助将数组显示到几个文本框

3 个答案: