javascript - 我怎样才能简化这个？ (菜鸟在这里)

Question

我有一个很长的 block ，我认为它可以简化，但我不知道该怎么做

const one = document.getElementById("one");
const two = document.getElementById("two");
const three = document.getElementById("three");
const four = document.getElementById("four");

one.onclick = () => {
  one.innerHTML = "";
};
two.onclick = () => {
  two.innerHTML = "";
};
three.onclick = () => {
  three.innerHTML = "";
};
four.onclick = () => {
four.innerHTML = "";
};

Answer 1

我同意 Alex 的观点，在您希望运行逻辑的元素上使用类更有意义。例如:

const elements = document.querySelectorAll('.js-clear-on-click');

elements.forEach(el => el.addEventListener('click', event => {
  el.textContent = '';
}));

现在您只需在 DOM 元素上添加“js-clear-on-click”类即可重用此功能，因此无需返回到您的 js 代码并使用“五”更新它例如。

编辑:如果您希望清除所有内部 HTML 的元素，请将 .textContent = ''; 替换为 .innerHTML = '';