Как решить задачу и экранизировать ошибку try, catch?

Question

Есть задача, но не могу понять ее решение. Помогите сообразить и понять логику.

При нажатии .b-5 выполняете функцию f5. Функция должна: 1. Получить все div.out-5 со страницы в массив a5. 2. Cоздать новые div.out-5 через createElement. Добавить с помощью push созданный div в массив a5. Поскольку для - то данная операция должна вызывать ошибку. Убедитесь в этом. Чтобы экранировать ошибку и не дать ей влиять на работу документа в целом, применим try, catch.

Мой код решения:

function f5() {
  let a5 = [];
  let divs = document.getElementsByClassName("out-5");

  a5.push(divs);

  console.log(a5);
  let newDiv = document.createElement("div");
 newDiv.classList.add('out-5');

  try {
    // тут делаете push
    a5.push(newDiv);

  } catch (error) {
    // если будет ошибка - то просто сообщим об этом в консоль, но код продолжит работать
    console.log(error);
  }
  console.log('already work');
}

document.querySelector('.b-5').addEventListener('click', f5);

<section>
  <button class="button-primary b-5">Task-5</button>
  <div class="out-5">out-5</div>
  <div class="out-5">out-5</div>
  <div class="out-5">out-5</div>
  <div class="out-5">out-5</div>
</section>

Что не так делаю?

Answer 1

Функция getElementsByClassName возвращает не массив, а коллекцию элементов, подробнее здесь. Поэтому сначала ее нужно преобразовать в массив (или for-ом пробежаться), а также добавить каждый элемент в массив a5. a5.push(...Array.from(divs)) - так должно работать.
В try/catch оборачивается тот код, который ошибки вызвать не может. Какой конкретно участок кода нужно мониторить из условия задачи не очень понятно. Как по мне здесь ошибки возникнуть не может ни при каких обстоятельствах.

function f5() {
  let a5 = [];
  let divs = document.getElementsByClassName("out-5");

  a5.push(...Array.from(divs));

  console.log(a5);
  let newDiv = document.createElement("div");
  newDiv.classList.add('out-5');

  try {
    // тут делаете push
    a5.push(newDiv);

  } catch (error) {
    // если будет ошибка - то просто сообщим об этом в консоль, но код продолжит работать
    console.log(error);
  }
  console.log('already work');
}

document.querySelector('.b-5').addEventListener('click', f5);

<section>
  <button class="button-primary b-5">Task-5</button>
  <div class="out-5">out-5</div>
  <div class="out-5">out-5</div>
  <div class="out-5">out-5</div>
  <div class="out-5">out-5</div>
</section>

БЛОГ НА HUSL

Как решить задачу и экранизировать ошибку try, catch?

Ответы (1 шт):