debugging?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 374,178 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,445 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 442 | Replies: 3 | Solved

•

Join Date: Jul 2005

Posts: 37

Reputation: jasondrey13 is an unknown quantity at this point

Rep Power: 4

Solved Threads: 0

jasondrey13 jasondrey13 is offline

Offline

Light Poster

debugging?

Mar 8th, 2008

hey im really new with javascript.
can someone tell me whats wrong with this?

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>calculate distance and slope between two points</title>
  
  <script language="javascript">
  <!--
  
  var x1=0;
  var y1=0;
  var x2=0;
  var y2=0;
  var xdif=0;
  var ydif=0;
  var xsldif=0;
  var xdifsquared=0;
  var ydifsquared=0;  
  var undersquare=0;
  var distance=0;
  var slope=0;
  
  function calculate()
   {
  
  x1=document.calcform.inpx1.value;
  y1=document.calcform.inpy1.value;
  x2=document.calcform.inpx2.value;
  y2=document.calcform.inpy2.value;
  
  xdif=x2-x1;
  ydif=y2-y1;
  
  xdifsquared=xdif*xdif;
  ydifsquared=ydif*ydif;
  
  undersquare=xdifsquared+ydifsquared;
  
  distance=Math.sqrt(undersquare);
  slope=ydif/xdif;
  
  //-->
  }  
  

  </script>
  </head>
  <body>
  
  <p><img src="distanceformula.gif" border="1">  </p>
  <p><img src="slope.gif" border="1"></p>
  <form name="calcform">
  <p>point 1: ( 
    <input type="text" name="inpx1" size="5"> 
    , 
    <input type="text" name="inpy1" size="5"> 
    ) <br>
 point 2: ( 
 <input type="text" name="inpx2" size="5"> 
 , 
 <input type="text" name="inpy2" size="5"> 
 )<br>
  </p>
  <button type="submit" onClick="calculate();">Calculate!</button>
  <p>
    <strong>distance:</strong>
    
  <script language="javascript">document.write(distance);</script>
  
  </p>
  <p><strong>slope:</strong><br>
    <script language="javascript">document.write(slopetop);</script>
    
<br>
-----    = <script language="javascript">document.write(slopefinal);</script><br>

    <script language="javascript">document.write(slopebottom);</script>
    <br>
  </p>
  </form>




  </body>
</html>

thanks so much,
Jason

•

Join Date: Jun 2006

Location: India

Posts: 6,731

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 323

~s.o.s~

Offline

Rebellion Revamped

Re: debugging?

Mar 9th, 2008

Where have you declared 'slopetop', 'slopebottom' and 'slopefinal'? And document.write() is evaluated as the page is being rendered. Plus Javascript is a client side technology; as soon as a page is submitted, what you get is a new page and the state maintained in Javascript variables is reset.

You need to dynamically update the value of a span or div element to get this code working as expected. Something like:

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Expires" content="0" /> <!-- disable caching -->
    <title>Example</title>
    <script type="text/javascript">
    function calculate(frm) {
      if(!frm)
        return(false);
      var elems = frm.elements;
      var x1 = parseInt(elems['inpx1'].value, 10);
      var x2 = parseInt(elems['inpx2'].value, 10);
      var y1 = parseInt(elems['inpy1'].value, 10);
      var y2 = parseInt(elems['inpy2'].value, 10);
      var e = elems['result1'];
      alert("(" + x1 + "," + y1 + ")" + " and (" + x2 + "," + y2 + ")");
      var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
      e.value = isNaN(distance) ? 'Invalid input' : distance;
    }
    </script>
</head>
<body>
  <form action="#">
    <div>(<input type="text" name="inpx1" size="5">,<input type="text" name="inpy1" size="5">)</div>
    <br>
    <div>(<input type="text" name="inpx2" size="5">,<input type="text" name="inpy2" size="5">)</div>
    <br>
    <input type="button" onclick="return calculate(this.form);" value="Calculate!">
    <br><br>
    <div>Distance: <input name="result1" readonly="readonly"></div>
  </form>
</body>
</html>

"I don't accept change. I don't deserve to live."

"Working a real job is a win if you're lazy, greedy, or unmotivated. If you're average, you fit right in. And if you're above average, the basic terms of employment and premise of the arrangement is against your interests."

•

Join Date: Jul 2005

Posts: 37

Reputation: jasondrey13 is an unknown quantity at this point

Rep Power: 4

Solved Threads: 0

jasondrey13 jasondrey13 is offline

Offline

Light Poster

Re: debugging?

Mar 9th, 2008

thanks!

•

Join Date: Jun 2006

Location: India

Posts: 6,731

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 23

Solved Threads: 323

~s.o.s~

Offline

Rebellion Revamped

Re: debugging?

Mar 9th, 2008

You were having a hard time debugging this simple snippet because maybe you were testing this code in IE; for debugging use Firefox. It provides good debugging support given it has error console (Tools -> Error Console). To try it out, run your previous snippet which you just posted in Firefox and look at the error console; the errors would be right there.

If you are up to it, you can even try the Firebug plugin which provides full blown debugging. And you can be pretty sure that if something works in Firefox will also work in IE.