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>