CODEWITHSUNDEEP
javascript
Nero Cheng
Nero Cheng

Reputation: 1

simple javascript with beginner

I am new to Javascript, I found on tutorial in YouTube. I did exactly as tutorial set to create function which sum two number, and creat html file to execute, when I click run with web browser. I am getting so confused. please help me. Thank you!

    function add(a,b){
    return a+b;

}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="myjs,js"></script>
</head>
<body>
<script type="text/javascript">alert(add(100,200));</script>
</body>
</html>

Upvotes: 0

Views: 145

Answers (3)

Michael Fuller
Michael Fuller

Reputation: 177

Well, good luck on learning, but you should probably check out a book on the subject like Javascript just the good parts. Also learning jQuery isn't a bad idea. I redid your example and changed it to accept user input and use a namespace. Its fine when starting out to just declare a function on the global namespace, but when you start getting into larger systems having overlapping methods is a problem.

And also learn how to use the chrome debugger, its essential in finding problems with javascript code. If you had the debugger open, you would have noticed the file name myjs,js didn't load a document, it would have probably logged a 404.

/* Lets declare a self executing method, it auto-executes and keeps the document clean */
(function(){
  
  // Make a new namespace, i'm going to call it NS, but you could name it anything.  This uses the OR logic to create if it doesn't exist.
  window.NS = window.NS || {};
  
  // Declare your function in the name space
  NS.add = function(a, b) {
    return a+b;
  };
  
}());

/* Wait till the document is ready, magic jQuery method */
$(function(){

  // No error prevention, this is just an example

  // Wait till the user clicks Calculate
  $('#Calculate').click(function(){
    var A = $('#A').val() - 0; // Get #A value, convert to number by subtwacting 0
    var B = $('#B').val() - 0; // Get #B value, convert to number
    // Call your method and set the value of #C
    $('#C').val(NS.add(A, B));
  });

});
<!-- Use jQuery, its the best -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <!-- Declare a few fields, we like user input -->
  <input type="text" id="A" value="1000"/>
  <input type="text" id="B" value="337"/>
  <!-- Use this field to hold input -->
  <input type="text" readonly id="C"/>
</div>
<!-- One button to rule them all -->
<button id="Calculate">Calculate</button>

Upvotes: 0

Rahul Singh
Rahul Singh

Reputation: 19622

Please Check this fiddle this is a working example for the issue the issue is the . in script

https://jsfiddle.net/rahulsingh09/Lww11j3t/

<script>    function add(a,b){
    return a+b;

}</script>
<body>
<script type="text/javascript">alert(add(100,200));</script>
</body>

Upvotes: -1

brk
brk

Reputation: 50291

It seems you are creating one single file. In that case the add function need to be inside script tag

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>
  <script type="text/javascript" src="myjs.js"></script>
</head>

<body>
  <script type="text/javascript">
    function add(a, b) {
      return a + b;
    }
    alert(add(100, 200));
  </script>
</body>

</html>

Also the is a typo here 

<script type="text/javascript" src="myjs,js"></script>

The comma (,) need to be replaced with dot (.)

Upvotes: 3

Related Questions