HTML 个按钮和事件侦听器

Question

我想创建一个动态 table 视图，其中单击按钮会显示 Table 行，但是，当我尝试更改按钮的文本时出现错误。

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>

错误：

Uncaught TypeError: Cannot set properties of undefined (setting 'innerText') at HTMLButtonElement.onClick

Answer 1

建议：

使用“显示”风格，而不是“可见性”，不让 space 在不可见时占据页面；
让多个元素具有相同的 id（例如“info”）不是个好主意，因为这违反了 HTML;
要显示和隐藏，使用直接从css读取信息，而不是使用辅助变量；
document.getElementsByTagName returns 一个对象，不是数组。导航方式是使用经典方式。

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

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>

HTML 个按钮和事件侦听器

HTML buttons and event listeners

html

javascript

button