Question

我有这个示例网站，我做的练习，我添加了一个带有一些JavaScript按钮的视频。当我在HTML文件中运行脚本时它运行得很好，但是如果我试图从.js文件中运行它，那它就不起作用，并且它们不会做任何事情。有什么想法吗？

html ：

<!DOCTYPE html>
<html>
<head>
<title>Blue Developer Directory</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<video id="ad" width="420" height="350"  controls>
          <source src="video/ad.mp4" type="video/mp4">
          Please update your browser
        </video>
        <div style="width:400px;"> 
              <button onclick="playPause()">Play/Pause</button> 
              <button onclick="makeBig()">Big</button>
              <button onclick="makeSmall()">Small</button>
              <button onclick="makeNormal()">Normal</button>
        </div> 

</body>

Javascript ：

var myVideo=document.getElementById(ad); 
function playPause(){ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig(){ 
myVideo.width=560; 
} 

function makeSmall(){ 
myVideo.width=320; 
} 

function makeNormal(){ 
myVideo.width=420; 
}

Answer 1

一个问题：

var myVideo=document.getElementById(ad);

需要引用：

var myVideo=document.getElementById('ad');

我还会删除内联事件处理程序并设置函数调用，如下所示：

<button id="play">Play/Pause</button>

和JS：

var play=document.getElementById('play');
play.onclick = function() {
    playPause();
}

Answer 2

您尝试在将元素添加到文档之前引用该元素。等到文档加载完毕。你需要将id包装在引号中。

var myVideo;
onload = function(){
    myVideo=document.getElementById("ad");
};

Answer 3

如前所述，您可能在准备好之前尝试访问元素;我假设你把头像放在头上。这可以通过将源放在文档的底部或等待onload来解决。以下是您尝试实现的jQuery示例：

<!DOCTYPE html>
<html>
<head>
<title>Blue Developer Directory</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<video id="ad" width="420" height="350"  controls>
      <source src="video/ad.mp4" type="video/mp4">
      Please update your browser
    </video>
    <div style="width:400px;"> 
          <button id="playPause">Play/Pause</button> 
          <button id="makeBig">Big</button>
          <button id="makeSmall">Small</button>
          <button id="makeNormal">Normal</button>
    </div> 

</body>

源代码

$( document ).ready( function(){
  var playPauseFunction = function (e) { ... };
  var makeBigFunction = function (e){ ... };
  .
  .
  $('#playPause').on('click', playFunction);
  $('#makeBig').on('click',makeBigFunction);
  .
  .
});

Answer 4

我明白了!! 我的CSS文件中的整个块的高度设置阻止该功能工作。现在它很棒。无论如何，谢谢。

JavaScript函数不起作用

4 个答案: