Show List
Tutorials > JavaScript > JavaScript Samples

JavaScript Samples

JavaScript code can be placed inside the HTML file within <script> and </script> tags. Here is a sample HTML code with JavaScript. Save this text in a file with .html extension and open with a browser program (such as Chrome)

index.html
<!DOCTYPE html>
<html>

<head>
  <script>
    function addNumbers() {
      document.getElementById("err").innerHTML = "";
      document.getElementById("result").innerHTML = "";
      var a = document.getElementById("fnum").value;
      var b = document.getElementById("snum").value;

      var sum = parseInt(a) + parseInt(b);

      if (isNaN(sum)) {
        document.getElementById("err").innerHTML = "Invalid Input";
        return;
      }
      document.getElementById("result").innerHTML = sum;
    }
  </script>
</head>

<body>
  <h2>Demo - Add Two Numbers</h2>

  <label for="fnum">First Number:</label><br>
  <input type="text" id="fnum"><br>
  <label for="snum">Second Number:</label><br>
  <input type="text" id="snum"><br><br>
  <button type="button" onclick="addNumbers()">Add</button>
  <p id="err"></p>
  <p id="result"></p>


</body>

</html>
Output:
Demo - Add Two Numbers







JavaScript code can be placed inside head section of the html page, in the body or can be put in an external file. In the above example the JavaScript was placed in the head section.

JavaScript inside the body

Here is an example of JavaScript in the body of the html page. It returns the same output as above sample. It is preferred to place the JavaScript code just before the end of body to not slow down the display
<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <br>
  <h2>Demo - Add Two Numbers</h2>

  <label for="fnum">First Number:</label><br>
  <input type="text" id="fnum"><br>
  <label for="snum">Second Number:</label><br>
  <input type="text" id="snum"><br><br>
  <button type="button" onclick="addNumbers()">Add</button>
  <p id="err"></p>
  <p id="result"></p>

  <script>
    function addNumbers() {
      document.getElementById("err").innerHTML = "";
      document.getElementById("result").innerHTML = "";
      var a = document.getElementById("fnum").value;
      var b = document.getElementById("snum").value;

      var sum = parseInt(a) + parseInt(b);

      if (isNaN(sum)) {
        document.getElementById("err").innerHTML = "Invalid Input";
        return;
      }
      document.getElementById("result").innerHTML = sum;
    }
  </script>
</body>

</html>

JavaScript in external file

JavaScript code can also be placed in its own file with .js extension. The JavaScript file is then referred in the html file using src attribute. This approach also enables to reuse the JavaScript across multiple html pages. Example:

index.html
<!DOCTYPE html>
<html>

<head>
  <script src="myJavaScript.js"> </script>
</head>

<body>
  <br>
  <h2>Demo - Add Two Numbers</h2>

  <label for="fnum">First Number:</label><br>
  <input type="text" id="fnum"><br>
  <label for="snum">Second Number:</label><br>
  <input type="text" id="snum"><br><br>
  <button type="button" onclick="addNumbers()">Add</button>
  <p id="err"></p>
  <p id="result"></p>


</body>

</html>
myJavaScript.js
function addNumbers() {
    document.getElementById("err").innerHTML = "";
    document.getElementById("result").innerHTML = "";
    var a = document.getElementById("fnum").value;
    var b = document.getElementById("snum").value;

    var sum = parseInt(a) + parseInt(b);

    if (isNaN(sum)) {
        document.getElementById("err").innerHTML = "Invalid Input";
        return;
    }
    document.getElementById("result").innerHTML = sum;
}


Next: Loops in JavaScript

    Leave a Comment

  • captcha text