Change fontSize and text in tag using only one JavaScript function

Question

I am trying to change fontSizeand innerTextusing the same JavaScript function. I changed fontSize, but I also want to change the text inside the tag <h3>using the same JavaScript function. Is it possible?

<h3 id="h3_heading">This is H3 HEADING Click Below Button to Change Font  Size</h3>
<button type="button" onclick="document.getElementById('h3_heading').style.fontSize ='72px'"">
    Click me to change font size and Written Text Inside H3 Tag
</button>

Answer 1

Of course, you will need to change your onclick to point to a function in your javascript code i.e.

<script>
function changeFontSize(elementId) {
    var element = document.getElementById(elementId);
    element.style.fontSize = '72px';
    element.innerText = 'Text you want here';
}
</script>

Your onclick will change to onclick="changeFontSize('h3_heading')"

Answer 2

I just deleted that second at the end of your event and it works. Also, look at the rewritten onclick event to change the HTML.

<h3 id="h3_heading">This is H3 HEADING Click Below Button to Change Font  Size</h3>

<button type="button" onclick="el = document.getElementById('h3_heading'); el.style.fontSize ='72px'; el.innerHTML = 'H3 changed!'">Click me to change font size and Written Text Inside H3 Tag</button>

Run codeHide result