Как я могу упростить это? (нуб здесь)

Question

Я получил этот очень длинный блок, и я думаю, что его можно упростить, но я не знаю, как это сделать

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

Я согласен с Алексом, использование логики c для элементов, которые вы используете sh, имеет больше смысла. Например:

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

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

Теперь вы можете повторно использовать эту функцию, просто добавив класс 'js -clear-on-click' к DOM-элементу, поэтому вам не нужно будет go вернитесь к своему js -коду и обновите его, например, до «пять».

Редактировать: Если вы хотите sh очистить элемент от всех внутренних HTML, замените .textContent = ''; на .innerHTML = '';

Answer 2

Вы можете создать массив идентификаторов и использовать forEach для этого и динамически добавлять прослушиватели событий

['one', 'two', 'three', 'four'].forEach(x => {
   const element = document.getElementById(x);
   element.onclick = function(){
      element.innerHTML = '';
   }
})

Answer 3

Или вы можете поставить 1 класс для всех элементов и использовать document.getElementsByClassName ().

    let eles = document.getElementsByClassName('yourClass');
    for (let i = 0; i < eles.length; i++) {
        eles[i].onclick = function () {
            eles[i].innerHTML = '';
        }
    }

Answer 4

Может быть так?

['one','two','three','four']
  .forEach(el=>document.getElementById(el)
                          .onclick=e=>e.target.textContent='');

доказательство:

['one','two','three','four']
  .forEach(el=>document.getElementById(el)
                          .onclick=e=>e.target.textContent='');

div {
  display: block;
  width: 3em;
  height:1.3em;
  border: 1px solid grey;
  margin: .7em 1em;
  padding: .3em;
  }

<div id="one"   contenteditable >div 1</div>
<div id="two"   contenteditable >div 2</div>
<div id="three" contenteditable >div 3</div>
<div id="four"  contenteditable >div 4</div>

или если все элементы имеют один и тот же класс (здесь во фрагменте указано «clearOnClick»)

document.querySelectorAll('.clearOnClick')
          .forEach(el=>el.onclick=e=>e.target.textContent='');

proof:

document.querySelectorAll('.clearOnClick')
          .forEach(el=>el.onclick=e=>e.target.textContent='');

.clearOnClick {
  display: block;
  width: 3em;
  height:1.3em;
  border: 1px solid grey;
  margin: .7em 1em;
  padding: .3em;
  }

<div id="one"   contenteditable class="clearOnClick">div 1</div>
<div id="two"   contenteditable class="clearOnClick">div 2</div>
<div id="three" contenteditable class="clearOnClick">div 3</div>
<div id="four"  contenteditable class="clearOnClick">div 4</div>