debugging?

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

<!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"> 
    ) 
 point 2: ( 
 <input type="text" name="inpx2" size="5"> 
 , 
 <input type="text" name="inpy2" size="5"> 
 )
  </p>
  <button type="submit" onClick="calculate();">Calculate!</button>
  <p>
    <strong>distance:</strong>
    
  <script language="javascript">document.write(distance);</script>
  
  </p>
  <p><strong>slope:</strong>
    <script language="javascript">document.write(slopetop);</script>
    

-----    = <script language="javascript">document.write(slopefinal);</script>

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




  </body>
</html>

thanks so much,
Jason

jasondrey13

Light Poster

41 posts since Jul 2005

Reputation Points: 16

Solved Threads: 0

4 Years Ago

Show Comments

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:

<!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>
    
    <div>(<input type="text" name="inpx2" size="5">,<input type="text" name="inpy2" size="5">)</div>
    
    <input type="button" onclick="return calculate(this.form);" value="Calculate!">
    
    <div>Distance: <input name="result1" readonly="readonly"></div>
  </form>
</body>
</html>

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

4 Years Ago

thanks!

jasondrey13

Light Poster

41 posts since Jul 2005

Reputation Points: 16

Solved Threads: 0

4 Years Ago

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.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 734

This question has already been solved

You