HTML 按钮和事件监听器

Question

我想制作一个动态表格视图，在该视图中单击按钮以显示表格行，但是，当我尝试更改按钮的文本时出现错误。

window.onload = () => {
  const buttons = document.getElementsByTagName("button")
  console.log(buttons)
  const info = document.getElementsByTagName("tr")
  // let a = 1

  for (let elem in info) {
    if (info.id != "info") continue
    else info.splice(info.indexOf(elem), 1)
  }


  for (i = 0; i < buttons.length; i++) {

    buttons[i].addEventListener("click", function onClick(a = 1) {
      if (a % 2 == 0) {
        info[i].style.visibility = "hidden"
        buttons[i].innerText = "View More" // wrong
      } else {
        info[i].style.visibility = "visible"
        buttons[i].innerText = "View Less" // wrong
      }
      a++
    })
  }
}

<button>Show Contents</button>

<table>
  <tr id="info" style="visibility:hidden;">
    <td width="80%">
      <p style="width:80%;text-align:center; margin-left:1%">
        The Planetarium is located on the first floor of the Science Centre. The planetarium has a shape of a sphere, 16.30 meters in diameter, the dome could also be used for extreme-wide-projections and other enhanced multi-media shows. It has a seating capacity
        of 140 the digital theatre of Planetarium facilitates the observation of planets, moon, stars, nebula, displayed on full dome through an advance technology and thus Astronomy Secrets will be shared with the students and general public. High resolution
        projectors operated through Digester 3 technology with digital audio system will provide a dazzling shows and that would be unforgettable experience. The shows will be in 3 languages Gujarati, Hindi and English.
      </p>
    </td>
</table>

错误：

未捕获的类型错误：无法设置未定义的属性（设置“innerText”） 在 HTMLButtonElement.onClick

Answer 1

建议：

• 使用“显示”样式，而不是“可见性”，以免页面不可见时占用空间；
• 不要让多个元素具有相同的 id（如“info”），因为这违反了 HTML 规则；
• 要显示和隐藏，请使用从 css 中直接读取信息，而不是使用辅助变量；
• document.getElementsByTagName 返回一个对象，而不是一个数组。导航方式是使用经典方式。

接下来，您的代码进行了一些修复：

window.onload = () => {
  const buttons = document.getElementsByTagName("button")
  //console.log(buttons)
  const info = document.getElementsByTagName("tr")
  // let a = 1
  let newInfo = [];
  for (let i = 0; i < info.length; i++) {
    if (info[i].id === "info"){
      newInfo.push(info[i]);
    }
  }


  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function onClick() {
    if (newInfo[i].style.visibility !== "hidden") {
      newInfo[i].style.visibility = "hidden"
      // Suggestion: use "display" style, instead of "visibility", to don't let the space ocupied on the page, when it's not visible
      //newInfo[i].style.display = "none"
      buttons[i].innerText = "View More" // wrong
    }
    else {
      newInfo[i].style.visibility = "visible"
      buttons[i].innerText = "View Less" // wrong
      //newInfo[i].style.display = ""
    }
  }) 
  }
}

<button>Show Contents</button>
<table>
<tr id="info" style="visibility:hidden;">
  <td width="80%">
    <p style="width:80%;text-align:center; margin-left:1%">
    1 - The Planetarium is located on the first floor of the Science Centre. The planetarium has a shape of a sphere, 16.30 meters in diameter, the dome could also be used for extreme-wide-projections and other enhanced multi-media shows. It has a seating capacity of 140 the digital theatre of Planetarium facilitates the observation of planets, moon, stars, nebula, displayed on full dome through an advance technology and thus Astronomy Secrets will be shared with the students and general public. High resolution projectors operated through Digester 3 technology with digital audio system will provide a dazzling shows and that would be unforgettable experience. The shows will be in 3 languages Gujarati, Hindi and English.
    </p>
  </td>
</table>
<button>Show Contents</button>
<table>
<tr id="info" style="visibility:hidden;">
  <td width="80%">
    <p style="width:80%;text-align:center; margin-left:1%">
    2 - The Planetarium is located on the first floor of the Science Centre. The planetarium has a shape of a sphere, 16.30 meters in diameter, the dome could also be used for extreme-wide-projections and other enhanced multi-media shows. It has a seating capacity of 140 the digital theatre of Planetarium facilitates the observation of planets, moon, stars, nebula, displayed on full dome through an advance technology and thus Astronomy Secrets will be shared with the students and general public. High resolution projectors operated through Digester 3 technology with digital audio system will provide a dazzling shows and that would be unforgettable experience. The shows will be in 3 languages Gujarati, Hindi and English.
    </p>
  </td>
</table>