0

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

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; 
}
4

4 回答 4

3

一题：

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();
}
于 2013-11-06T23:20:16.190 回答
1

您试图在将元素添加到文档之前引用它。等到文件加载完毕。您需要将 id 用引号括起来。

var myVideo;
onload = function(){
    myVideo=document.getElementById("ad");
};
于 2013-11-06T23:22:09.523 回答
0

如前所述，您可能会在元素准备好之前尝试访问它们；我假设您将糟糕的代码放在头脑中。这可以通过将源放在文档底部或等待加载来解决。这是您要实现的目标的 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);
  .
  .
});
于 2013-11-07T00:38:33.817 回答
0

我懂了！！我在我的 CSS 文件中设置了整个块的高度，以阻止该功能正常工作。现在效果很好。不管怎么说，还是要谢谢你。

于 2013-11-07T10:56:10.107 回答