JavaScript Video Tutorial Pt 8

Javascript Error HandlingIn this tutorial I go over a bunch of JavaScript tricks with a focus on error handling in general. If you missed the other parts of this tutorial you should start here JavaScript Video Tutorial.

I’m going to touch on how to dynamically update the web page, because you guys have some questions about that. I’ll then explain how JavaScript Error Handling works by showing you how Try, Throw and Catch works.

All of the code follows the video below and it is free to use however you’d like.

Leave all questions and comments below.

Code From the Video

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>Javascript Error Handling</title>

<script type=”text/javascript”>

function divideMe(helpId)

{

var topVar = document.getElementById(“topvar”).value;       // Gets the value stored in the textbox called topvar

var botVar = document.getElementById(“botvar”).value;       // Gets the value stored in the textbox called botvar

try { // You surround your code with a try box if you want to catch possible errors

if(!topVar || !botVar)

{

throw new Error(“Please enter a value in both fields”);

}

else if(isNaN(topVar) || isNaN(botVar))

{

throw new Error(“Please enter only numbers in the fields”);

}

else if(botVar == 0)

{

throw new Error(“You cant divide by zero”);

}

if (helpId != null)

{

while (helpId.firstChild) // Remove any warnings that may exist

helpId.removeChild(helpId.firstChild);

}

var answer = topVar + ” / ” + botVar + ” = ” + topVar/botVar;

helpId.appendChild(document.createTextNode(answer));

}

catch (errMsg) // If errors are triggered they are sent here

{

if (helpId != null)

{

while (helpId.firstChild) // Remove any warnings that may exist

helpId.removeChild(helpId.firstChild);

}

helpId.appendChild(document.createTextNode(errMsg));

}

}

</script>

<noscript>   <h3>This site requires JavaScript</h3>   </noscript>

</head>
<body>

<div>

Enter the numbers you’d like to divide:<br />

<input id=”topvar” name=”topvar” type=”text” size=”10″ /><br />

<input id=”botvar” name=”botvar” type=”text” size=”10″          onblur=”divideMe(document.getElementById(‘answer’))” /><br />        <span id=”answer”></span>

<!– this is the id number for the text box –>

</div>
</body>

</html>

6 Responses to “JavaScript Video Tutorial Pt 8”

  1. Mack says:

    I copied and pasted this and it didn’t work.

    • admin says:

      I emailed it to you. The code works you just need to perform a replace on the quotes. Sorry about that.

      It may go in your junk email because attached html normally does.

      Thanks

  2. adam says:

    That right and Thanks for this copy of code Mr. Derek. It just have to adjust the single quote and double quote with ” and “”.
    Besides that all the code is work fine for me. Thaks for The tutorial

    Adam-Indonesia

    • admin says:

      Yes, all of my older tutorials require you to change the quotes. Sorry about that. I’ll go back and correct that issue asap

      • deeceew says:

        I’m a newb and really trying to just grasp it all. I copied and pated the code in Dreamweaver CS 5.5 but I keep getting a syntax error. When I sift through the code, I can’t find the error but the code only works partway on my localhost? I tried looking at what you told Mack back in April of ’11 but that hasn’t helped either. So now I appeal to you oh great wizard…

        • admin says:

          One problem you could be having would have to do with quotes. You have to replace all of the back quotes with regular quotes. This is a old security feature I used in past tutorials. If you do a find and replace for that issue everything should work. Sorry about that

Leave a Reply

Your email address will not be published.

Google+