почему не работает код, если меняется порядок выписки?

Question

Мой CodePen

dataPanel.addEventListener('click', function(event){
  if (event.target.matches('.fa-thumbs-up')) {
    let score = parseInt(event.target.parentElement.children[2].innerText)
    event.target.parentElement.children[2].innerText = score + 1
  } else if (event.target.matches('.fa-thumbs-down')) {
    let score = parseInt(event.target.parentElement.children[2].innerText)
    event.target.parentElement.children[2].innerText = score - 1
  } else if (event.target.matches('.btn-danger')) {
    let tr = event.target.parentElement.parentElement
    tr.remove()
  } 
})

В настоящее время функция работает, но я не понимаю, поставлю ли я "давай счет ..." перед "если насыщение", btn -danger не будет работать, и codePen покажет «Uncaught TypeError: Невозможно прочитать свойство« innerText »из undefined». Это о сфере действия функции?

Answer 1

Ваш dataPanel по сути является элементом, содержащим все, и вы добавили к нему прослушиватель click.

В зависимости от того, где вы щелкнете внутри dataPanel, у цели события щелчка может не быть третьего дочернего элемента (children[2]), и, следовательно, возникнет ошибка, говорящая о том, что вы не можете прочитать свойство innerText из undefined.

Причина, по которой нет ошибки, когда ваш let score находится внутри тех условий if, что те, если условия гарантируют, что для цели события определено children[2].

Answer 2

Это происходит потому, что ваши вызванные дочерние элементы существуют только в том случае, если хотя бы один из первых двух элементов соответствует условиям.

Например, если вы щелкнете по «.btn-danger» массив children [2] или индекс не существует, и если он существует, то потомки [2] .innerText могут не анализироваться с целым числом, готовым к вычитанию в следующей строке, поскольку они не принадлежат текущей области шаблона html, определенной событием.