Embedded Files
JavaScript Display Possibilities
JavaScript Display Possibilities
JavaScript may "display" data in a variety of ways:
Using innerHTML, write into an HTML element.
Using document.write() to write into the HTML output.
Using window.alert() to create an alert box.
Using console.log() to write to the browser console.
Using innerHTML
Using innerHTML
JavaScript may use the document.getElementById(id) function to get an HTML element.
The HTML element is defined by the id property. The HTML content is defined by the innerHTML property:
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Math</h2>
<p>Howdy! It's me again partner, We're going to do a math...</p>
<p>Math in coding, HAHAHAHA... yeah it's real.</p>
<p>Anyways here some basic example</p>
<p id="g1"></p>
<p id="g2"></p>
<p id="g3"></p>
<p id="g4"></p>
</body>
</html>
JAVASCRIPT
document.getElementById("g1").innerHTML = 8 + 8;
document.getElementById("g2").innerHTML = 12 + 12;
document.getElementById("g3").innerHTML = 16 + 16;
document.getElementById("g4").innerHTML = 20 + 20;
Using document.write()
Using document.write()
For testing purposes, it is convenient to use document.write():
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>MATH Again</h2>
<p>Easy math coding</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
</body>
</html>
JAVASCRIPT
document.write(5 + 6);
document.write(10 - 10);
document.write(5 * 6);
In this part I will combine HTML and JAVA again.
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2> MATH</h2>
<p>While using *(aka multiplication) this time</p>
<button type="button" onclick="document.write(6 * 6)">Try it</button>
</body>
</html>
Using window.alert()
Using window.alert()
You can use an alert box to display data:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>MATH</h2>
<p>Divide</p>
<script>
window.alert(120 / 6);
</script>
</body>
</html>
(only works at sololearn, Try it there)
You can skip the window keyword.
In JavaScript, the window object is the global scope object. This means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>MATH</h2>
<p>Divide</p>
<script>
alert(120 / 6);
</script>
</body>
</html>
(only works at sololearn, Try it there)
Using console.log()
Using console.log()
To show data for debugging reasons, use the browser's consoloe.log() function.
EXAMPLE
HTML
<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>
</body>
</html>
JAVASCRIPT
console.log(25 + 25);
console.log(50 - 35);
console.log(15 * 10);
console.log(150 / 25);
(Only works on SOLOLEARN)
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>Print Method</h2>
<p>Howdy! It's me again partner, Anyways I'll stop my greetings now. I want you to click this "Print this page" and check if it works</p>
<button onclick="window.print()">Print this page</button>
</body>
</html>
(Only works at SoloLearn thought)
Page updated
Google Sites
Report abuse