Question

如果我在HTML文件中放置一些脚本来改变动画播放状态，它就可以工作。但是当我把脚本放在脚本文件中时，它不起作用。任何人都可以告诉我为什么？像这样的脚本：

var buttons=document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++) {
    console.log(buttons.length);
    buttons[i].onclick=function(e) {
      document.getElementById("para")
      .style.WebkitAnimationPlayState=e.target.innerHTML;
    };
}

Answer 1

可能未在document中定义元素。尝试将现有脚本放在load

的window事件处理程序中

function toggleAnimationPlayState() {
  var buttons=document.getElementsByTagName("button");
  for(var i=0;i<buttons.length;i++) {
    console.log(buttons.length);
    buttons[i].onclick=function(e) {
      document.getElementById("para")
      .style.WebkitAnimationPlayState=e.target.innerHTML;
    };
  }
}

window.addEventListener("load", toggleAnimationPlayState);

Answer 2

您的脚本取决于此Button的现有内容：

=document.getElementsByTagName("button");

所以，

可行，因为渲染按钮后脚本一直在运行。
它不起作用，因为：
- 无法导入脚本。（查看浏览器的控制台）

OR

在渲染按钮之前导入脚本。

解决方案：

按照此顺序。

  <button>....</button>
     .......
  <script src="/uri/of/script.js"></script>

或者，在onload

window

用于更改动画播放状态的脚本

2 个答案:

解决方案：