javascript, динамически изменяющий содержимое веб-страницы с вложенными циклами

Question

Проще говоря, я хочу изменить все значения в заголовках на 't' при нажатии кнопки, поэтому у меня есть следующий код, ошибок нет
я ожидаю, что все заголовки изменят свое содержимое на '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>

также, пожалуйста, скажите мне, почему выше не работает

Answer 1

Вы неожиданно вызываете функцию removeHeadings(), вам нужно передать функцию, а не результат ее вызова.

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

Далее необходимо использовать функцию getElementsByTagName.

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

Функция getElementsByName находит элементы по атрибуту name в элементах. Например:

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

Функция getElementsByTagName находит элементы по тегу HTML, в вашем случае теги H, например:

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

Answer 2

Используя jQuery, вы можете сделать это следующим образом.

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

Answer 3

Во-первых, вы выполняете функцию removeHeadings и передаете ее в качестве аргумента для прослушивателя событий. Во-вторых, вы пытаетесь получить элементы по имени, когда вы хотите получить их по имени тега - для этого используйте 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>