Odtnhj

simply put i want to change all the values in headings to 't' when a button is pressed so i have the following code there are no errors

what i expect to happen is for all headings to change their content to 't'

window.onload = function () 
 let specialButton = document.getElementById('mainButton')

 specialButton.addEventListener('click', removeHeadings())

 function removeHeadings () 
 for (var j = 1, length = 7; j < length; j++) 
 let headings = document.getElementsByName('h' + j)
 for (var i = 0, len = headings.length; i < len; i++) 
 headings[i].innerHTML = 't '
 
 
 

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>

also please tell me why the above does not work

Firstly, you are executing the removeHeadings function and passing it as the argument for the event listener. Secondly, you are trying to get elements by name when you mean to get them by their tag name – to do this use getElementsByTagName.

window.onload = function () 
 let specialButton = document.getElementById('mainButton')

 specialButton.addEventListener('click', removeHeadings)

 function removeHeadings () 
 for (var j = 1, length = 7; j < length; j++) 
 let headings = document.getElementsByTagName('h' + j)
 for (var i = 0, len = headings.length; i < len; i++) 
 headings[i].innerHTML = 't '
 
 
 

<h1>s</h1>
<h2>s</h2>
<h3>s</h3>
<button id="mainButton">Remove Headings</button>

You're suddenly calling the function removeHeadings(), you need to pass the function and not the result of calling it.

specialButton.addEventListener('click', removeHeadings()); // Remove the parentheses
 ^^

Further, you need to use the function getElementsByTagName.

let headings = document.getElementsByName('h' + j)
 ^^^^^^^^^^^^^^^^^^^^

The function getElementsByName finds elements by the attribute name in elements. for Example:

<input type='button' name='myButton'>
 ^^^^

The function getElementsByTagName finds elements by the HTML tag, in your case the H tags, for example:

<input type='button' name='myButton'>
 ^^^^^

By Using jQuery you can do this like.

HTML

<h1>S</h1>
<h2>S</h2>
<h3>S</h3>
<h4>S</h4>
<h5>S</h5>
<h6>S</h6>
<button id="change">CHANGE</button>

jQuery

$("#change").click(function change() 
 console.log("CLICKED");
 $("h1, h2, h3, h4, h5, h6").html("T");
);

JsFiddle Live Example