Javascript code unable to run

Page 1 of 1

9 Replies - 367 Views - Last Post: 15 February 2013 - 05:51 PM

#1 ho-ho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 69
  • Joined: 04-May 09

Javascript code unable to run

Posted 14 February 2013 - 03:26 PM

Hi,I just began to get my hands dirty with javascript. The code which I have in the js file doesn't seems to run.
I did check for any missing curly brace or semi-colon etc.
If someone could please check the code and tell me what am I missing here.
Thanks

<html>
  <head>
  <title>MATH USING Javascript</title>
  <script type="text/javascript" src="mathCalc.js"></script>
  </head>
  
  <body>
  
  <h1>MATH USING Javascript</h1>
  <p>How to calculate the circumference of a given radius?</p>
  <p>Please enter radius:<input type="text" id="enterRadius"></p>
  <p><input type="button" value="calculate" id="calcRadius"></p>
  <p><id="message"></p>
  
  </body>
 </html>

// now the js file
function init()
  {
  var myButton = document.getElementById("calcRadius");
  myButton.onclick = calcAnswer;
  
  }
  onload = init;
  function calcAnswer()
  {
  
         var rad = document.getElementById("enterRadius");
	 var myrad = parseInt(rad.value);
	 var myMessage = document.getElementById("message");
	
	
	if(isNan(myrad))
	{
	
	alert("Please enter a number!");
	
	}
	else
	{
	
	var calcradius = 2 * (Math.PI * myrad);
	var myMessage = document.getElementById("message");
	myMessage.innerHTML = calcradius;
	
	}
	
  }


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript code unable to run

#2 andrewsw  Icon User is online

  • Provides a RESTful service
  • member icon

Reputation: 1094
  • View blog
  • Posts: 3,406
  • Joined: 12-December 12

Re: Javascript code unable to run

Posted 14 February 2013 - 03:38 PM

This line is invalid HTML:

<p><id="message"></p>

I presume you may have meant:
<p id="message"></p>


I assume also that you have a valid DOCTYPE declaration and a title for your page?

..and not isNan but isNaN.

This post has been edited by andrewsw: 14 February 2013 - 03:40 PM

Was This Post Helpful? 2
  • +
  • -

#3 ho-ho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 69
  • Joined: 04-May 09

Re: Javascript code unable to run

Posted 14 February 2013 - 04:35 PM

Thanks andrewsw. It worked. I guess mistakes like these happen in the beginning.
I am learning javascript using tutorials in html.net
Was This Post Helpful? 0
  • +
  • -

#4 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 407
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Javascript code unable to run

Posted 15 February 2013 - 12:04 AM

Well, andrewsw is right as usual :)

Now, I have a small suggestion for you. You always need to check if the user has entered value in the textboxes before clicking on the 'calculate' button.

So, for that, you could do something like this to indicate the user that he needs to fill in some value before clicking on the button.
if(rad=="")
    	{
    		alert("Please fill in the radius value in the textbox");
    		return;
    	}


Oh...and one more thing.
2 * Pi * radius is actually the circumference of the circle.


So, ideally, your variable should be calcCircumference instead of calcRadius.

It is always the best programming practice to give logical names for the id's of various components.That helps in enhancing the readability of your code.

regards,
Raghav

This post has been edited by raghav.naganathan: 15 February 2013 - 12:05 AM

Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: Javascript code unable to run

Posted 15 February 2013 - 12:31 AM

one additional tip: if something doesn’t work, always check the Error Console. if there is an error, it’s listed there.
Was This Post Helpful? 0
  • +
  • -

#6 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 407
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Javascript code unable to run

Posted 15 February 2013 - 01:06 AM

Also, there is another way of calling the method calcAnswer() which I am showing here...

You can create the function call in the input tag for button itself like this.

<input type="button" value="calculate" id="calcCircumference" onclick="calcAnswer()">


Now that you have done that, there is no use of the init method and can be commented out from your program and the calcAnswer() method will be called directly.

And a small correction in my previous post...

Since you have given rad as
var rad = document.getElementById("enterRadius");


the if condition for empty textbox should be

 if(rad.value=="")
	 {
	    alert("Please fill in the radius value in the textbox");
	    return;
	 }

regards,
Raghav
Was This Post Helpful? 1
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: Javascript code unable to run

Posted 15 February 2013 - 01:30 AM

View Postraghav.naganathan, on 15 February 2013 - 09:06 AM, said:

You can create the function call in the input tag for button itself like this.

though the problem with that is that you start to mix languages again. keeping the event handlers purely in JS, you preserve Context (and can use all kinds of JS’s feats (like Closures)) and content-code separation.

rather than reverting to old-school event attributes you may place your script before the closing </body> tag, where all other HTML elements are loaded. this way you could omit init() as well.
Was This Post Helpful? 2
  • +
  • -

#8 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 407
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Javascript code unable to run

Posted 15 February 2013 - 01:48 AM

Thanks for that helpful information Dormilich

Well, I have a question here, is that a wrong way to call the methods using onclick in the input tag itself?

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#9 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: Javascript code unable to run

Posted 15 February 2013 - 03:35 AM

that depends on the context. in terms of programming context (aka content-code separation) it is clearly wrong. in the terms of maintainability it is also wrong (you have to check a HTML file for a Java​Script issue). in terms of technical definition it is correct (you are allowed to do so).
Was This Post Helpful? 1
  • +
  • -

#10 ho-ho  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 69
  • Joined: 04-May 09

Re: Javascript code unable to run

Posted 15 February 2013 - 05:51 PM

Thanks Raghav and Dormilich for letting me know a better way to program using javascript.
I was following tutorials on html.net and this was their way of doing it but there's always a better way of programming.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1