View video tutorial

HTML JavaScript

HTML

<script> makes HTML elements live in a document.

Scripting in HTML


JavaScript makes HTML elements capable of doing user interactions.

Script can be internal in the document or external from the document.

Internal script overwrites external script if applied on the same elements.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Internal Script

The script runs when the page loads.

<script>
    var elmnt = document.getElementById("id1");
    elmnt.innerHTML = "Element is Changed by JavaScript";
    elmnt.style.backgroundColor = "#505050";
    elmnt.style.padding = "20px";
    elmnt.style.color = "#fff";
</script>

Example

<!DOCTYPE html>
<html>
    <!-- Example: JavaScript Tag --> 
<head>
<title>Internal Script Example</title>
</head>
<body>
<p>Internal Script Example.</p>
<h1>Welcome to w3context.</h1>
<p id="id1">Hello World!</p> 
<script>
       var elmnt = document.getElementById("id1");
       elmnt.innerHTML="Element is Changed by JavaScript";
       elmnt.style.backgroundColor="#505050";
       elmnt.style.padding="20px";
       elmnt.style.color = "#fff";
</script>
</body>
</html>
Try it Now »

Click on the "See output" button to see how it works.


Internal Script

The script runs when the button clicks.

Example

<script>
    function m1(){
    var elmnt = document.getElementById("id1");
    elmnt.innerHTML = "Element is Changed by JavaScript";
    elmnt.style.backgroundColor = "#505050";
    elmnt.style.padding = "20px";
    elmnt.style.color = "#fff";
    }
</script>
Try it Now »

Click on the "See output" button to see how it works.


Internal Script

Add two numbers when the button clicks.

Example

<script>
    function m1() {
        var n1 = parseInt(document.getElementById("t1").value);
        var n2 = parseInt(document.getElementById("t2").value);
        elmnt.innerHTML = "Result: " + (n1 + n2);
    }
    var elmnt = document.getElementById("id1");
    elmnt.style.backgroundColor = "#505050";
    elmnt.style.padding = "20px";
    elmnt.style.color = "#fff";
</script>
Try it Now »

Click on the "See output" button to see how it works.


Internal Script

Add two numbers when the mouse hover on a text.

Example

<h4>Enter Numbers in the text fields and hover on the result.</h4>
<input type="text" id="t1" placeholder="Enter a number" value="15" /><br>
<input type="text" id="t2" placeholder="Enter a number" value="10" /><br>
<p id="id1" onmouseover="m1();">Result:</p>
<script>
    var elmnt = document.getElementById("id1");
    elmnt.style.backgroundColor = "#505050";
    elmnt.style.padding = "20px";
    elmnt.style.color = "#fff";
    function m1() {
        var n1 = parseInt(document.getElementById("t1").value);
        var n2 = parseInt(document.getElementById("t2").value);
        elmnt.innerHTML = "Result: " + (n1 + n2);
    }
</script>
Try it Now »

Click on the "See output" button to see how it works.


External Script

Using External Script add two numbers when the mouse hover on a text.

Example

<h4>Enter Numbers in the text fields and hover on the result.</h4>
<input type="text" id="t1" placeholder="Enter a number" value="15" /><br>
<input type="text" id="t2" placeholder="Enter a number" value="10" /><br>
<p id="id1" onmouseover="m1();">Result:</p>
<script src="externalscript.js" type="text/javascript"></script>
Try it Now »

Click on the "Try it Now" button to see how it works.