javascript - 在 JavaScript 中仅使用一个按钮保留不同的标题

Question

所以我刚刚开始熟悉 DOM 和 JavaScript。我正在玩这个小代码，其中包含 html 中的所有标题、段落，只需单击一个按钮，JavaScript 就会将所有文本更改为相同的颜色。但我找不到任何方法不重复自己。如果有什么聪明的方法，你们能帮我吗？甚至循环什么的？感谢您的帮助!

<div id="main_content">
<h1 id="heading_1">Hello World</h1>
<h2 id="heading_2">Hello World</h2>
<h3 id="heading_3">Hello World</h3>
<h4 id="heading_4">Hello World</h4>
<h5 id="heading_5">Hello World</h5>
<h6 id="heading_6">Hello World</h6>
<p id="paragraph">Lorem ipsum ipsum and ipsum and some ipsum</p>
</div>
</div>
<input type="text" id="value_color">
<button id="myButton">Check the font color!</button>

var heading_1 = document.getElementById("heading_1");
var button = document.getElementById("myButton");
var value_color = document.getElementById("value_color");

button.addEventListener('click', () =>{
heading_1.style.color = value_color.value;
heading_2.style.color = value_color.value;
heading_3.style.color = value_color.value;
heading_4.style.color = value_color.value;
heading_5.style.color = value_color.value;
heading_6.style.color = value_color.value;
});

Answer 1

您可能希望使用类而不是 ID 来选择 header 。

var headers = document.getElementsByClassName("chameleon-header");
for (i = 0; i < headers.length; i++) {
  headers[i].style.color = value_color.value;
}

<h1 id="heading_1" class="chameleon-header">Hello World</h1>
<h2 id="heading_2" class="chameleon-header">Hello World</h2>