javascript使用嵌套的for循环动态更改网页的内容

Question

简单地说，我想在按下按钮时将标题中的所有值更改为“t”，所以我有以下代码没有错误
我期望发生的是所有标题都将其内容更改为“t”

window.onload = function () {
  let specialButton = document.getElementById('mainButton')

  specialButton.addEventListener('click', removeHeadings())

  function removeHeadings () {
    for (var j = 1, length = 7; j < length; j++) {
      let headings = document.getElementsByName('h' + j)
      for (var i = 0, len = headings.length; i < len; i++) {
        headings[i].innerHTML = 't '
      }
    }
  }
}

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>

另外请告诉我为什么上面的方法不起作用

Answer 1

首先，您正在执行 removeHeadings 函数并将其作为参数传递给事件监听器。其次，当您想通过标签名称获取元素时，您正试图通过名称获取元素 - 为此，请使用 getElementsByTagName。

window.onload = function () {
  let specialButton = document.getElementById('mainButton')

  specialButton.addEventListener('click', removeHeadings)

  function removeHeadings () {
    for (var j = 1, length = 7; j < length; j++) {
      let headings = document.getElementsByTagName('h' + j)
      for (var i = 0, len = headings.length; i < len; i++) {
        headings[i].innerHTML = 't '
      }
    }
  }
}

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>