javascript - 访问 HTML block 内的 innerHTML 文本节点

Question

我正在尝试访问如此巨大的 HTML 中的 12:00 数字。它位于 <div id = gameClock> 。我尝试使用 getElementById().innerHTML div 的，然后 console log具有单击元素时触发的函数，没有给我任何结果，也没有错误

function minusMinute() {
  time = window.document.getElementById('gameClock').innerHTML;
  console.log(time);
}

minusMinute = window.document.getElementById('minusMinute');

minusMinute.addEventListener('click', minusMinute, false);

<div class="row">
  <div class="text-center small-12 small-centered columns">
    <div class="row">
      <div id="gameClock" class=" small-6 small-centered columns">
        <span class='clockButtons badge primary' id='minusMinute'><i class='fi-minus'></i></span><span class='clockButtons badge primary'><i onClick='minusMinute'class='fi-plus'></i></span><span id='gameTime'>12:00</span><span class='clockButtons badge primary'><i class='fi-minus'></i></span>
        <span
        class='clockButtons badge primary'><i class='fi-plus'></i>
          </span>
      </div>
    </div>
  </div>
</div>

Answer 1

您有多个问题:

• 您已声明了一个名为 minusMinute 的函数，但您还声明了一个名为 minusMinute 的变量，并赋值给它会覆盖该函数。所以你的

  minusMinute.addEventListener('click', minusMinute, false);
  

  line 将元素连接为点击处理程序。

• 您的 HTML 还具有 onclick="minusMinute"。如果 minusMinute 是一个函数，那么它不会执行任何操作，因为浏览器创建的用于包装代码的函数只会引用 minusMinute但不调用它。 onXyz 属性处理程序应包含函数调用(例如 onclick="minusMinute()")，但如果您使用 addEventListener，则不需要根本不需要 onclick 属性。

• 虽然 12:00 确实位于带有 id="gameClock" 的元素内，但其中还有很多其他。但有用的是，它完全在 id="gameTime" 的范围内。

这是一个经过最小更改的固定版本:

function minusMinute(){
  var time = window.document.getElementById('gameTime').innerHTML;
  console.log(time);
}

window.document.getElementById('minusMinute').addEventListener('click', minusMinute, false);

<div class="row">
<div class="text-center small-12 small-centered columns">
    <div class="row">
      <div id="gameClock"class=" small-6 small-centered columns">
        <span class='clockButtons badge primary' id='minusMinute'><i class='fi-minus'>minusMinuteIsHere</i></span><span class='clockButtons badge primary'><i class='fi-plus'></i></span><span id='gameTime'>12:00</span><span class='clockButtons badge primary'><i class='fi-minus'></i></span><span class='clockButtons badge primary'><i class='fi-plus'></i></span>
      </div>
    </div>
</div>

变化:

1. 我没有声明 minusMinute 变量并为其赋值，因此 minusMinute 函数不会被覆盖。

2. 我删除了 onclick 属性

3. 我使用了 gameTime 而不是 gameClock

4. 仅出于该代码段的目的，我在 minusMinute 元素内放置了一些文本，因为该代码段没有您的 CSS，因此没有可供单击的图标。

<小时/>

旁注:不需要window.document，只需使用document。 window 是一个全局变量(指向全局对象，其中大多数全局变量都可用作属性)，而 document 是一个全局变量，所以...我的意思是，您还可以执行window.window.document或window.window.window.document。 :-)