Javascript math using a .js file

Add two numbers and use a .js file

Page 1 of 1

8 Replies - 995 Views - Last Post: 02 October 2010 - 06:42 AM

#1 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 120
  • Joined: 12-April 10

Javascript math using a .js file

Posted 01 October 2010 - 06:53 PM

Hi all, Ok I've been reading and reading and the more I read the more confused I get. I think I have the basic formula down, but its not giving me a output. I am trying to write a javascript code (my first one) that will add two numbers entered by the user and show the sum. I have to use .js file and thats where I'm confused. I first wrote the below code in the HTML file and it worked perfectly, but now since I moved the function to a .js I think I am calling the function wrong... If anyone could please help. THE numbers.js file
function addNumbers()
{                
                        var val1 = parseInt(document.getElementById("value1").value);
                        var val2 = parseInt(document.getElementById("value2").value);
                        var ansD = document.getElementById("answer");
                        ansD.value = val1 + val2;
}
This is the HTML file
<?xml version="1.0" encoding="UTF-8" ?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!-- hello.html
A simple addition example of XHTML/Javascript
-->

<html xmlns = "http://www.w3.org/1999/xhtml">


 <head>
        <title>Input tutorial</title>
        <script type="text"/javascript" src="numbers.js"></script>          
        
  </head>
  <body>
        value1 = <input type="text" id="value1" name="value1" value="1"/>
        value2 = <input type="text" id="value2" name="value2" value="2"/>
        <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
        Answer = <input type="text" id="answer" name="answer" value=""/>
  </body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript math using a .js file

#2 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 431
  • View blog
  • Posts: 1,452
  • Joined: 28-April 09

Re: Javascript math using a .js file

Posted 01 October 2010 - 07:02 PM

looks like your script tag is messed up

<script type="text"/javascript" src="numbers.js"></script> 

should be

<script type="text/javascript" src="numbers.js"></script>

Was This Post Helpful? 1
  • +
  • -

#3 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 120
  • Joined: 12-April 10

Re: Javascript math using a .js file

Posted 01 October 2010 - 07:10 PM

Nakar,,, I took out the extra " and still will not work?
Was This Post Helpful? 0
  • +
  • -

#4 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2486
  • View blog
  • Posts: 8,533
  • Joined: 08-August 08

Re: Javascript math using a .js file

Posted 01 October 2010 - 08:21 PM

It works for me. My guess is that you don't have the right name or path for the javascript file.
Was This Post Helpful? 0
  • +
  • -

#5 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 120
  • Joined: 12-April 10

Re: Javascript math using a .js file

Posted 01 October 2010 - 08:24 PM

If i have the wrong file, I am not seeing it. I linked it to numbers.js, How exactly does a .js file layout. Is there suppose to be <-- before and after the code. Im not sure what Im missing.
Was This Post Helpful? 0
  • +
  • -

#6 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2486
  • View blog
  • Posts: 8,533
  • Joined: 08-August 08

Re: Javascript math using a .js file

Posted 01 October 2010 - 11:22 PM

Try it this way:
<?xml version="1.0" encoding="UTF-8" ?>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!-- hello.html
A simple addition example of XHTML/Javascript
-->

<html xmlns = "http://www.w3.org/1999/xhtml">


 <head>
        <title>Input tutorial</title>
<script type="text/javascript">
function addNumbers()
{
	var val1 = parseInt(document.getElementById("value1").value);
	var val2 = parseInt(document.getElementById("value2").value);
	var ansD = document.getElementById("answer");
	ansD.value = val1 + val2;
}                        
</script>        
  </head>
  <body>
        value1 = <input type="text" id="value1" name="value1" value="1"/>
        value2 = <input type="text" id="value2" name="value2" value="2"/>
        <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers();"/>
        Answer = <input type="text" id="answer" name="answer" value=""/>
  </body>
</html>

If that works then you aren't referencing the js file properly.
Was This Post Helpful? 0
  • +
  • -

#7 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 334
  • View blog
  • Posts: 1,178
  • Joined: 02-April 09

Re: Javascript math using a .js file

Posted 02 October 2010 - 04:01 AM

Works for me too.
Hot tip, though: in your onclick handler you don't need to include javascript:
Was This Post Helpful? 0
  • +
  • -

#8 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 120
  • Joined: 12-April 10

Re: Javascript math using a .js file

Posted 02 October 2010 - 06:30 AM

Yes it works fine when I have the javascript embedded. But I need to have a .js file for the assignment. And Im not sure what a on click handler is?
Was This Post Helpful? 0
  • +
  • -

#9 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 120
  • Joined: 12-April 10

Re: Javascript math using a .js file

Posted 02 October 2010 - 06:42 AM

Thanks guys, I figured it out. My .js file was in a style folder so I just added /styles/numbers.js to my link. It works. And I deleted value="1" and and value="2" and the boxes are empty when they appear. Now all I have to do is get it to validate strict and Im good...Ill post here if I have any validations problems, or should I start a new thread for that?
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1