<p id=”text”>
<button onmouseover=”showName()”>My name is?</button>
<script>
function showName() {
document.getElementById(‘text’).innerHTML=‘Paul’
}
</script>
In the above example, if the user hovers over the element, the action will be triggered, and the function will run, replacing the text with ‘Paul’ just like in the example before.
This integration between HTML and JavaScript allows us so much control over our webpage and enables us to create rich, dynamic experiences for our users.
We have only scratched the surface of event handling in JavaScript – there’s a lot more going on with event handlers, which we will see again in the next chapter.
This chapter brings our journey through the basics of JavaScript to a close. We have covered a huge amount of information and worked our way through an incredible amount of sample code. Your journey towards becoming a web developer has taken a huge leap forward in this section.
You have explored the entire basics of a programming language that will transform your website from a simple, static page into a dynamic, living, breathing experience. You should feel incredibly proud of yourself for getting this far. It really is impressive and shows true determination that will serve you well in the future within the field of web design, where determination and resilience are fundamental traits of a successful programmer.
The next, and final, section will see us working through a series of instructions together to build our own website using everything we have learned so far. This will be our biggest test yet, but will also be the most rewarding. It will help you get familiar with writing the code you have seen in this book so far.