addEventListener 在控制台中工作但在 JS 中不起作用

Question

我有這個圖書館的代碼。 https://jsfiddle.net/j5mxws4n/

我正在使用“閱讀”標志，我想在點擊時添加一個事件以將圖標從刻度線更改為 X。我可以通過谷歌控制台來完成，但是當我在 JS 中執行此操作時，我得到一個null 錯誤，這有點奇怪。

我嘗試這樣做的方式：

document.querySelector('#sign).addEventListener('click', (e)=>{
if(e.target.innerHTML === '✔'){
        e.target.innerHTML = 'X'}
else{
        e.target.innerHTML = '✔'
})

即使我只是輸入，我也會收到空錯誤：

let sign = document.querySelector('#sign').textContent;

Answer 1

你要這個

https://jsfiddle.net/mplungjan/h43ztr1k/

• 將符號更改為類，因為 ID 必須是唯一的 -
• 您需要委托，以便將單擊添加到容器

還要記得preventDefault 否則頁面會跳轉

document.querySelector('#book-list').addEventListener('click', (e)=>{
  e.preventDefault();
  let tgt = e.target, cls = e.target.classList;
  console.log(cls)
  if (cls.contains("delete")) tgt.closest("tr").remove()
  else if (cls.contains("sign")) {
    e.target.textContent = e.target.textContent === "✔" ? "𝗫":"✔";
  }
})

Answer 2

//You forgot to add the closing '
document.querySelector('#sign).addEventListener('click', (e)=>{

這一行應該這樣寫

document.querySelector('#sign').addEventListener('click', (e)=>{

Answer 3

 document.querySelector('#sign').addEventListener('click', (e)=>{ if(e.target.innerHTML === '✔'){ e.target.innerHTML = 'X'} else{ e.target.innerHTML = '✔' }}) let sign = document.querySelector('#sign').textContent;

 <h1>click on check icon </h1> <div id='sign'>✔</div>