DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - debugging? (http://www.daniweb.com/forums/thread112920.html)

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"> 

    ) <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

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>

    <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>

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.