Функции JavaScript просто не работают

Question

Функции JavaScript просто не работают

0

У меня есть этот образец сайта, который я делаю для практики, и я добавил видео к нему с помощью некоторых кнопок с 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; 
}

Netanel Dadon 07 нояб. 2013, в 00:21

Источник

1

Переместите тег сценария в конец тела.
Pointy 06 нояб. 2013, в 23:19
0

Измените myVideo.paused или myVideo.pause чтобы они ссылались на одно и то же.
DevlshOne 06 нояб. 2013, в 23:22
0

@DevlshOne - paused является DOM - свойство <video> элемента и pause() представляет собой метод DOM.
gilly3 06 нояб. 2013, в 23:30

Показать ещё 1 комментарий

Теги:

javascript

html

website

4 ответа

1

Вы пытаетесь ссылаться на элемент до его добавления в документ. Подождите, пока документ не будет загружен. И вам нужно обернуть идентификатор в кавычки.

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

gilly3 06 нояб. 2013, в 21:32

0

спасибо, что все, что работало с нагрузкой, сделали свою работу!
Netanel Dadon 06 нояб. 2013, в 23:36

0

я понял!! У меня был параметр высоты всего блока в моем файле CSS, который мешает работе функции. теперь он отлично работает. Спасибо, в любом случае.

Netanel Dadon 07 нояб. 2013, в 08:26

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);
  .
  .
});

Michael Godden 06 нояб. 2013, в 21:40

Ещё вопросы

Переместите тег сценария в конец тела.
Измените myVideo.paused или myVideo.pause чтобы они ссылались на одно и то же.
@DevlshOne - paused является DOM - свойство <video> элемента и pause() представляет собой метод DOM.
спасибо, что все, что работало с нагрузкой, сделали свою работу!

Stuart Kershaw · Accepted Answer · 2013-11-06T21-07-00.000Z

Один вопрос:

var myVideo=document.getElementById(ad);

Потребности котировки:

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

Я также удалял обработчики событий inline и настраивал вызовы функций следующим образом:

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

И JS:

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