Question

我试图在这个庞大的HTML范围内访问12:00号码。它在<div id = gameClock>中。我尝试使用div的getElementById().innerHTML，然后console log使用单击该元素时触发的函数，不给我任何错误，也没有错误

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

那里有多个问题：

您已声明了一个名为minusMinute的函数，但您还声明了一个名为minusMinute的变量，并指定了它覆盖功能。所以你的
```
minusMinute.addEventListener('click', minusMinute, false);
```
line将元素连接为点击处理程序。
您的HTML也有onclick="minusMinute"。如果minusMinute 是一个函数，那就不会做任何事情，因为浏览器创建的用于包装代码的函数只会引用minusMinute但不会调用它。 onXyz属性处理程序应包含函数调用（例如onclick="minusMinute()"），但如果您使用addEventListener，则不需要onclick属性所有
虽然12:00位于id="gameClock"的元素中，但其中还有很多 else 。但有用的是id="gameTime"内的所有内容。

这是一个固定版本，只有很小的改动：

＆＃13;

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

＆＃13;

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

＆＃13;

的变化：

我没有声明minusMinute变量并分配给它，因此minusMinute函数不会被覆盖。
我删除了onclick属性
我使用gameTime而不是gameClock
出于代码段的目的，我在minusMinute元素中添加了一些文字，因为代码段没有CSS，所以没有点击的图标。

附注：没有window.document，只需使用document。 window是一个全局变量（指向全局对象，其中大多数全局变量可用作属性），document是一个全局变量，所以...我的意思是，你也可以window.window.document 1}}或window.window.window.document。： - ）

Answer 2

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

你还遇到的另一个问题是你为全局变量minusMinute使用了相同的名称，而函数名称减去了MinMinute，这样你就会产生错误。

Answer 3

当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中一些奇怪的onclicks，最后，addEventListener与所有浏览器都不兼容。

以下是我清理过的HTML代码 - 我必须在minusMinute中添加一些内容才能看到它

＆＃13;

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

＆＃13;

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

＆＃13;

在HTML块中访问innerHTML文本节点

3 个答案: