Styling elements is only a small part of what JavaScript is capable of, but it's certainly one of its most entertaining features.
We can assign JavaScript code to HTML button elements in order to better observe its effect. Copy the following code between the body tags of your document and check it out in the browser.
<h1 id="headingId">Heading</h1>
<button type="button" onClick="document.getElementById('headingId').style.color = 'blue'">Click Here</button>
The text in the onClick attribute of the button defines the JavaScript code to be executed when the element is clicked. Instead of entering the entirety of our code here, we can simply write a function and have the button call the function when clicked.
Another alternative would be to add the code to the onclick attribute using JavaScript. Try this:
<h1 id="heading">Heading</h1>
<button type="button" id="buttonId">Click Here</button>
<script>
document.getElementById("buttonId").onClick = changeColor();
</script>
In order to make this code work, you'll have to write the changeColor function. Give it a try.
In addition to changing the font color, you can also define any of the other CSS style properties that we learned about earlier. Try writing functions that change background color, font size, margin, padding, and border.
Often we don't want to wait for user input to execute code, but run it as the page loads. We do this using the onLoad attribute. By assigning code to this attribute in the same way we did with onClick, the code will automatically execute when the body loads. Change the previous code from onClick to onLoad and observe the results
Rather than using the onClick or onLoad attributes to execute code, we can use JavaScript to add event listeners to HTML elements. This allows us to execute code in a more versatile fashion. Try adding this code between your script tags (make sure the script is below your HTML element):
document.getElementById("buttonId").addEventListener("click", function() {
document.getElementById("headingId").innerHTML = "Thanks!";
});
This code first gets the element with the specified id, then adds an event listener, which will execute the specified function whenever the object is clicked. The function to be executed is then defined.
In addition to styling elements, we can also create them with JavaScript. This is useful for creating a series of elements with loops. Try entering this code between the script tags of your document and observing the result:
var element = document.createElement("p");
var text = document.createTextNode("Paragraph");
element.appendChild(text);
document.body.appendChild(element);
Make sure you actually execute this code. Once you get it working, try placing it in a loop and creating multiple elements with unique text.
Now that you're familiar with HTML and CSS, JavaScript variables, functions, loops, conditionals, and styling, let's practice.