如何划分索引并使用 onclick 事件将其打印在 JavaScript 和 HTML 的新行上

Posted 2023-05-07

【中文标题】如何划分索引并使用 onclick 事件将其打印在 JavaScript 和 HTML 的新行上

【英文标题】：How do I section out an Index and have it print on a new line in JavaScript and HTML with an onclick event

【发布时间】：2018-05-18 02:11:12

【问题描述】：

我有一个看起来像这样的索引

var quotes = ["string 1",
  "string 2",
  "string 3",
  "string 4",
  "string 5",
  "string 6",
  "string 7",
  "string 8",
  "string 9",
  "string 10", //this pattern continues for a while
];

我正在尝试将我的数组分割成更小的块，但我不想每次都创建一个新数组。我正在使用以下代码来做到这一点：

function openingText() 
  var opening = quotes.slice(0, 7);
  for (var x in opening) 
    opening[x] = '>' + opening[x];
    document.getElementById("text").innerhtml = opening[x];
  

我已将此函数分配给我的 HTML 文件中的 onclick 事件。 当我运行代码string 7 时打印，但没有别的。

如何使用onclick 使其从 0 开始打印并遍历每个字符串到 7？

【问题讨论】：

1.我不建议您将 for-in 用于数组； 2. 你的代码没有右括号（可能它只是代码的一部分）。因此，如果打印部分代码超出了for 正文，它将以x 的最后一个值执行。此外，document.getElementById("text").innerHTML = opening[x]; 您不是在添加，而是在重写元素的内容。

document.getElementById("text").innerHTML = opening[x]; 你不是在添加而是覆盖当前值= !== +=

javascript innerHTML adding instead of replacing的可能重复

有道理，我明白你在说什么。我会改变一些东西，看看它是否有效。谢谢！

【参考方案1】：

在您的 for-loop 中，您将覆盖 innerHTML 七次。你有：

document.getElementById("text").innerHTML = opening[x];

你想要： document.getElementById("text").innerHTML += opening[x];

这样，您将追加到先前的值而不是覆盖它。

【讨论】：

谢谢！我至少明白我做错了什么以及为什么做错了，这真的很有帮助。