访问 HTML 块内的 innerHTML 文本节点

Question

我正在尝试访问 HTML 这个巨大跨度中的 12:00 号码。它在 <div id = gameClock> 中。我尝试使用 div 的 getElementById().innerHTML，然后 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);
```
行正在连接元素作为点击处理程序。
你的HTML也有onclick="minusMinute"。如果 minusMinute 是一个函数，那将不会做任何事情，因为浏览器创建的用于包装您的代码的函数只会引用 minusMinute 而不会调用它。 onXyz 属性处理程序应包含函数调用（例如 onclick="minusMinute()"），但如果您使用 addEventListener，则根本不需要 onclick 属性。
虽然 12:00 确实在带有 id="gameClock" 的元素内，但那里也有很多 else。但有用的是，它在 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>

变化：

我没有声明一个 minusMinute 变量并赋值给它，所以 minusMinute 函数不会被覆盖。
我删除了 onclick 属性
我用的是gameTime而不是gameClock
仅出于代码段的目的，我在 minusMinute 元素内放置了一些文本，因为代码段没有您的 CSS，因此没有图标点击

旁注：不需要 window.document，只需使用 document。 window 是一个全局变量（指向全局对象，其中大多数全局变量都可以作为属性使用），而 document 是一个全局变量，所以......我的意思是，你也可以这样做 window.window.document，或 window.window.window.document。 :-)

Answer 2

首先需要在 Dom 元素存在时执行此操作，例如 onload :

window.onload=function() {
  var minusMinute = window.document.getElementById('minusMinute');
  minusMinute.addEventListener('click', minusMinute, false);
}

或更简单、更兼容 - 我假设您想要 gameTime 而不是 gameClock

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

上述匿名函数还解决了函数和对象之间的名称冲突问题。

您在 html 中也有一些奇怪的点击需要删除，最后，addEventListener 并不兼容所有浏览器。

这是你清理后的我的代码HTML - 我必须向 minusMinute 添加一些内容才能看到它

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

<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 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 3

就像已经提到的 mplungjan 一样，当您尝试获取它的内容时，您应该确保该元素存在（通过在末尾包含 javascript 或使用 onload 函数）。

您还遇到的另一个问题是您对全局变量 minusMinute 和函数名称 minusMinute 使用了相同的名称，这样会产生错误。

访问 HTML 块内的 innerHTML 文本节点

acessing innerHTML text node inside a block of HTML

javascript

dom

innerhtml