HTML按钮和事件监听器-编程知识-白鹭情

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

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>

错误：

uj5u.com热心网友回复：

建议：

使用“显示”样式，而不是“可见性”，不要让页面不可见时占用的空间；
多个元素具有相同的 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>