在 JavaScript 中使用 for 循环更改 H1答案

【问题标题】：Changing the H1 with for loop in JavaScript在 JavaScript 中使用 for 循环更改 H1
【发布时间】：2021-02-17 00:42:14
【问题描述】：

JS 新手在这里。我正在尝试获取 H1 标记中的所有值并更改长度小于 4 的值。

它说“请回答问题”我需要它说“请回答你好问题”

let header = document.getElementById("h1").innerHTML;
let splittedText = header.split(" ");

function seperateText() {
  for (let i = 0; i < splittedText.length; i++) {
    if (splittedText[i].length < 4) {

      splittedText[i].innerHTML = "Hello"
    }
  }
  // console.log(splittedText[i]);
  return splittedText[i].innerHTML;
}
seperateText();

&lt;h1 id="h1"&gt;Please Answer the Questions&lt;/h1&gt;

【问题讨论】：

字符串没有innerHTML 属性。请尝试使用浏览器的debugging capabilities。找出splittedText 是什么。找出splittedText[i] 是什么。它不是元素。为什么在循环之外返回splittedText[i].innerHTML？这种表达毫无意义。数组有一个join 方法。
你的 sn-p 给出了相关的控制台错误。修复它们
您正在拆分一个字符串，这会为您提供一个字符串数组。接下来，您遍历这些字符串，并尝试设置他们没有的.innerHTML。您需要在数组上调用.map() 来更改单个单词，然后将连接结果设置为header.innerHTML：jsfiddle.net/e09fs4aq

标签： javascript for-loop dom innerhtml

【解决方案1】：

您的代码正在尝试设置字符串的 innerHTML - 这不起作用

[i] 也不存在于循环之外

试试这张地图

const seperateText = str => {
  let splittedText = str.split(" ");
  return splittedText.map(word => word.length > 4 ? word : "hello").join(" ");
}

let header1 = document.getElementById("h1")
header1.innerHTML = seperateText(header1.innerHTML);

let header2 = document.getElementById("empty")
header2.innerHTML = seperateText(header2.innerHTML);

<h1 id="h1">Please Answer the Questions</h1>
<h1 id="empty"></h1>

或者这个替换

const seperateText = str => {
  return str.replace(/\b(\w+)\b/gi, match => match.length < 4 ? "hello" : match);
}

let header1 = document.getElementById("h1")
header1.innerHTML = seperateText(header1.innerHTML);

let header2 = document.getElementById("empty")
header2.innerHTML = seperateText(header2.innerHTML);

<h1 id="h1">Please Answer the Questions</h1>
<h1 id="empty"></h1>

【讨论】：