Embedded Files
JavaScript Can Change HTML Content
JavaScript Can Change HTML Content
getElementById() is one of numerous JavaScript HTML methods.
The following example "finds" an HTML element (with id="demo") and changes its content (innerHTML) to "Hello JavaScript":
One of a simple example!
JAVASCRIPT
console.log("Hello World!");
EXAMPLE
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>Howdy! It's me again!</p>
<p>I'll teach you how to update the values of images by utilizing the src (source code) as an image property.</p>
<img id="myImage" src="https://i2-prod.lancs.live/incoming/article24006048.ece/ALTERNATES/s810/1_IMG-2573-1.jpg" style="width:500px">
<p>This is typical weather! Isn't it a classic? (chuckled)</p>
<p>Choose your weather :) Partner!</p>
<button onclick="document.getElementById('myImage').src='https://cdn.britannica.com/05/155405-050-F8969EE6/Spring-flowers-fruit-trees-bloom.jpg'">Spring</button>
<button onclick="document.getElementById('myImage').src='https://hips.hearstapps.com/hmg-prod/images/autumn-leaves-royalty-free-image-1594753784.jpg?crop=1.00xw:0.752xh;0,0&resize=1200:*'">Authmn</button>
<button onclick="document.getElementById('myImage').src='https://hips.hearstapps.com/hmg-prod/images/beautiful-tropical-sunset-scenery-two-sun-beds-royalty-free-image-1595368231.jpg?crop=1.00xw:0.752xh;0,0.159xh&resize=1200:*'">Summer</button>
<button onclick="document.getElementById('myImage').src='https://c.tadst.com/gfx/900x506/winter-lake.jpg?1'">Winter</button>
</body>
</html>
Another one
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
Another Two ;)
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
Now for the explaination for the two.
On the first one, I was modifying an HTML element's style is a subset of modifying an HTML attribute:
The second one, I was modifying the display style, HTML components can be hidden:
Interesting eh? What do you think partner?
Anyways, Let's continue my lesson plans ;)
JavaScript Can Show HTML Elements
JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
Example
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
Page updated
Google Sites
Report abuse