innerHTML 的侦听器 [重复]

Posted 2023-05-07

【中文标题】innerHTML 的侦听器 [重复]

【英文标题】：Listener to innerHTML [duplicate]

【发布时间】：2020-09-16 11:39:44

【问题描述】：

我有 5 次倒计时，如果计时器为“00:00”，我想点击下面的图片。 现在我有它像下面的代码，但我必须每次点击都刷新页面。是否有类似用于 innerhtml 的事件侦听器的东西。我用计时器解决了这个问题，它检查了 innerhtml，但我不想使用计时器。

  var ct1 = document.querySelector("#countdown1 > span").innerText
  if (ct1 == "00:00")  document.querySelector("#farmimage_1").click(); 

  var ct2 = document.querySelector("#countdown2 > span").innerText
  if (ct2 == "00:00")  document.querySelector("#farmimage_2").click(); 

  var ct3 = document.querySelector("#countdown3 > span").innerText
  if (ct3 == "00:00")  document.querySelector("#farmimage_3").click(); 

  var ct4 = document.querySelector("#countdown4 > span").innerText
  if (ct4 == "00:00")  document.querySelector("#farmimage_4").click(); 

  var ct5 = document.querySelector("#countdown5 > span").innerText
  if (ct5 == "00:00")  document.querySelector("#farmimage_5").click(); 

【问题讨论】：

什么？为什么？只需将侦听器放在跨度上，然后在该侦听器的事件处理程序中，检查event.target.textContent（不是 innerHTML，您不关心HTML代码，您关心文本）

你的意思是什么现在我有它就像下面的代码但我每次点击都必须刷新页面

@Reggie 我的意思是只有在我刷新页面时才会点击图片

【参考方案1】：

MutationObserver interface 可以解决问题：

function toggle() 
  let div = document.getElementById('d0');
  div.textContent = div.textContent == 'foo'? 'bar':'foo';


window.onload = function()

  document.getElementById('b0').addEventListener('click', toggle, false);
  
  let div = document.getElementById('d0');
  let observer = new MutationObserver(function() 
    console.log('textContent changed to ' + div.textContent);
  );
  observer.observe(div, childList: true);

<div id="d0">foo</div>
<button id="b0">Toggle foo/bar</button>

与计时器一起使用：

// Simple countdown
function timer()
  let div = document.getElementById('timer');
  let time = div.textContent;
  let intervalID = setInterval(() => 
    div.textContent = --time;
    if (time == 0) clearInterval(intervalID);
  , 1000);



window.onload = function() 

  // Create observer
  let div = document.getElementById('timer');
  let observer = new MutationObserver(function() 
    if (div.textContent == '0') 
      console.log('Zero!!');
    
  );
  // Start observing
  observer.observe(div, 
    childList: true
  );
  // Start timer
  timer();
;

<div id="timer">5</div>