Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 900

Mar 9th, 2008

debugging?

Expand Post »

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

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

Similar Threads

jasondrey13

Reputation Points: 16

Solved Threads: 0

Light Poster

Offline

41 posts
since Jul 2005

Permalink

Mar 9th, 2008

Re: debugging?

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:

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>

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

Permalink

Mar 9th, 2008

Re: debugging?

thanks!

jasondrey13

Reputation Points: 16

Solved Threads: 0

Light Poster

Offline

41 posts
since Jul 2005

Permalink

Mar 9th, 2008

Re: debugging?

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~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Embedding a PHPBB forum into your website : Problems/Solutions

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Forms with AJAX

DaniWeb Message

Cancel Changes

User Name
Password