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>
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>
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>
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>
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>
Click on the "Try it Now" button to see how it works.