I got this h1 tag that I want change when clicking a button.
I want it so then when you click a button, an h1 tag will change to something else, like to "bananas" or something. How could I use an onclick event to change it?
You can use (addEventListener) with (click) event to listen on click button by using javascript code. i hope it's clear and helpful, Thanks!.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- My Heading -->
<h1 id="MyHeading">This is a Heading</h1>
<!-- My Button -->
<button id="MyButton">Click Me!</button>
</body>
</html>
<script>
//Select button by id
const MyButton = document.getElementById('MyButton');
//Add on click listener for button
MyButton.addEventListener('click', function() {
//Select (h1) heading by id, and then change it's value to (bananas)
document.getElementById('MyHeading').innerText = "bananas"
})
</script>