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>

錯誤：

未捕獲的型別錯誤：無法在 HTMLButtonElement.onClick 處設定未定義的屬性（設定“innerText”）

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>

標籤：

上一篇：檔案按鈕里面的背景前面有東西

下一篇：Pwa安裝自帶按鈕安裝JS HTML CSS