1 Star2 Stars3 Stars4 Stars5 Stars (8 votes, average: 5.00 out of 5)

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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
<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.

Subscribe To My YouTube Channel:
<script>
function changeHeading(){

document.getElementById("change").innerHTML="New Heading Title";

}
</script>
JavaScript Buttons onClick Event getElementById was last modified: May 13th, 2015 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
JavaScript Buttons onClick Event getElementById

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.