JavaScript can "display" data in four different ways:
- Writing into an HTML element, using innerHTML.
- Writing into the HTML output using document.write().
- Writing into an alert box, using window.alert().
- Writing into the browser console, using console.log()
Using innerHTML:
To access an HTML element Using innerHTML, JavaScript can use the document.getElementById(id) method.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: gray;
}
</style>
</head>
<body>
<h2>webpage using innerHTML</h2>
<p>innerHTML example.</p>
<p id="example"></p>
<script> document.getElementById("example").innerHTML = 10 + 12;
</script>
</body>
</html>
Result:
Using document.write():
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: gray;
}
</style>
</head>
<body>
<h2>webpage using document.write()</h2>
<p>document.write() example.</p>
<p id="example"></p>
<script>
document.write(100 + 5);
</script>
</body>
</html>
Result:
Using window.alert():
By using an alert box you can display data:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: gray;
}
</style>
</head>
<body>
<h2>webpage using window.alert()</h2>
<p>window.alert() example.</p>
<p id="example"></p>
<script>
window.alert(12 + 10);
</script>
</body>
</html>
Using console.log():
You can use the console.log() method to display data, For debugging purposes
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: gray;
}
</style>
</head>
<body>
<h2>Activate debugging by clicking F12</h2>
<p>Select "Console" in the debugger menu. Then click Run again.</p>
<script>
console.log(10 + 12);
</script>
</body>
</html>
In the following, I'm showing about JavaScript Display Possibilities.
Source code of the above video project:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Display Possibilities</h2>
<h4>JavaScript can "display" data in different ways:.</h4>
<p>1. Writing into an HTML element, using innerHTML.</p>
<p>2. Writing into the HTML output using document.write().</p>
<p>3. Writing into an alert box, using window.alert().</p>
<p>4. Writing into the browser console, using console.log().</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 + 6;
document.write(200 + 6);
window.alert(5 + 10);
console.log(12 + 13); //works in browser console to display the result
</script>
</body>
</html>
EmoticonEmoticon