Javascript errors showing in Google developer tools

Page 1 of 1

1 Replies - 967 Views - Last Post: 18 September 2012 - 06:18 AM

#1 dasker  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 88
  • Joined: 10-November 10

Javascript errors showing in Google developer tools

Posted 17 September 2012 - 02:14 PM

I am getting the following error in google developer tools:

Uncaught TypeError: Cannot read property 'style' of null naptime.js:8
5Uncaught ReferenceError: value is not defined

I am designing a simple count down timer that plays music.
I cannot figure out what the errors are. Can anyone shed some light on the problem. Thank you.
here are the two files.
<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Programming a Timer with HTML5 Audio</title>



</head>

<script LANGUAGE="Javascript" src= "naptime.js"></script>

<body >

<p id="wakeup">WAKE UP</p>

<form name="napTime" onsubmit="0" id="dashboard">

  <input type="text" id="seconds" name="seconds" size="5"  value="60" /> 

  <input type="button" value="Start Nap" id="start" />

  <input type="button" value="Pause Music" id="toggle" />

</form>

<audio id="audiotag1" src="http://www.santarosa.edu/~jperetz/fall2012/projects/naptime/stellar.mp3" preload="auto"></audio>

<script src= "naptime.js"></script>

</body>

</html>


naptime.js
// javascript document.  naptime .js



var timer = new Date();

var seconds = document.getElementById('seconds');

var dashboard = document.getElementById('dashboard');

var wakeup = document.getElementById('wakeup');

wakeup.style.display = "none";



function alarm() {

    timer.setSeconds(timer.getSeconds() - 1);

    seconds.value = timer.getSeconds();

    if (timer.getSeconds() === 0) {

        wakeup.style.display = "block";

        dashboard.style.display = "none";		

        			   

    }

}



var start = document.getElementById('start');

start.addEventListener('click', takeNap);

var audioElement = document.getElementById('audiotag1');



function takeNap() {

    timer.setSeconds(seconds,value);

    window.setInterval(alarm,1000);

    start.style.display ="none";

    onOff.style.display = "inline";

     playMusic();

}



var onOff = document.getElementById("toggle");

onOff.style.display = "none";

onOff.addEventListener('click', pausePlay);

audioElement.addEventListener('ended', playMusic);

function playMusic() {

    audioElement.play();

}

function pausePlay() {

    if (onOff.getAttribute("value") === "Pause Music") {

        audioElement.pause();

        onOff.setAttribute("value", "Resume Music");

    } else {		

        audioElement.play();

        onOff.setAttribute("value", "Pause Music");

    }

}


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript errors showing in Google developer tools

#2 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Javascript errors showing in Google developer tools

Posted 18 September 2012 - 06:18 AM

Firstly, you shouldn't include that "naptime.js" script twice.
Secondly, the first script referes to some elements which are not loaded yet due it's incorect placement.

You should get rid of this line:
<script LANGUAGE="Javascript" src= "naptime.js"></script>

My advice is to encapsulate your actions into functions and call them when the appropriate moment occurs. For instance: initialize your vars like this:
var timer,seconds,dashboard,wakeup,start,audioElement,onOff;

function init(){
  timer = new Date();
  seconds = document.getElementById('seconds');
  dashboard = document.getElementById('dashboard');
  wakeup = document.getElementById('wakeup');
  start = document.getElementById('start');
  audioElement = document.getElementById('audiotag1');
  onOff = document.getElementById("toggle");
}

window.onload = init;

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1