JavaScript Buttons onClick Event getElementById

In this tutorial we are going to use JavaScript Buttons onClick Event getElementById. First thing to know is that we can give any HTML element an id. Here are some examples, we are giving every one of the HTML elements an id of test.

<div id="test"></div>

<h2 id="test"></h2>

<p id="test"></p>

<body id="test"></body>

We can target any kind of html element that has an d in JavaScript. In the examples above we have 4 different kinds of html elements. Normally you would only put an id on one html element to target it for JavaScript. I will set up a h3 html element and I will give it a div of change below. Then I will set up a html button element and enter some JavaScript to change whatever is written in the h3 element.

<h3 id="change">This is my heading title</h3>

JavaScript Buttons onClick Event getElementById

Now for the html button that I will use to change the text inside the h3 html element.

<button onClick="changeHeading()">Change Heading</button>

Now to create the JavaScript function that will control the button.

<script>
function changeHeading(){
document.getElementById("change").innerHTML="New Heading Title";
}
</script>

Message from Maximus

JavaScript Buttons onClick Event getElementById