AJAX

debugging?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jul 2005

Posts: 41

Reputation: jasondrey13 is an unknown quantity at this point

Solved Threads: 0

jasondrey13 jasondrey13 is offline

Offline

Light Poster

debugging?

Mar 9th, 2008

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (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>
<!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

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

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 
 JavaScript / DHTML / AJAX Syntax (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>
<!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.

•

Join Date: Jul 2005

Posts: 41

Reputation: jasondrey13 is an unknown quantity at this point

Solved Threads: 0

jasondrey13 jasondrey13 is offline

Offline

Light Poster

Re: debugging?

Mar 9th, 2008

thanks!

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

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.

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