Почему оператор my if работает с оператором else if, но не с оператором OR

Question

Я написал небольшой фрагмент JS в консоли, чтобы просмотреть рекомендуемые соединения в LinkedIn и, если текст содержит определенное слово, игнорировать эту карту, в противном случае нажмите кнопку закрытия "X".

Первоначально я написал это так:

const list = document.querySelector('.mn-pymk-list__cards');
const cards = list.querySelectorAll('.mn-pymk-list__card');

cards.forEach( (card, i) => {

  setTimeout( ()=>{
    let text = card.querySelector('.member-insights__count');

    if( !text.textContent.includes('Sharon') || text === null ) {
        card.querySelector('.pymk-card__close-btn').click();
       } else {
        card.style.background = 'green';
       }
  }, i * 1000 )

});

Однако, когда он запускался, он иногда выдавал ошибку (продолжая итерацию) с "Не удалось прочитать textContent of null".

Тем не менее, когда я написал код так:

const list = document.querySelector('.mn-pymk-list__cards');
const cards = list.querySelectorAll('.mn-pymk-list__card');

cards.forEach( (card, i) => {

  setTimeout( ()=>{
    let text = card.querySelector('.member-insights__count');

    if( text === null ) {
        card.querySelector('.pymk-card__close-btn').click();
    } else if (!text.textContent.includes('Sharon')) {
        card.querySelector('.pymk-card__close-btn').click();
    } else {
        card.style.background = 'green';
    }
  }, i * 1000 )

});

Он работает абсолютно нормально и делает то, что я хочу.

ВОПРОС: Я не могу понять, почему первый вариант не работает, так как он кажется более кратким и теоретически должен делать то же самое?

Я подозреваю, что это как-то связано с тем, что в LinkedIn некоторые из предложенных контактов не имеют класса.member-insights__count и вместо них имеют.member-insights__info.

Но это все равно должно заставить текст преобразоваться в ноль, верно?

Любое понимание было бы здорово!

Answer 1

if( !text.textContent.includes('Sharon') || text === null ) {

Что вы ожидаете от этого кода, когда text нулевой? Это приведет к сбою, потому что вы не можете получить доступ к свойствам или методам null.

Вы должны проверить на ноль в первую очередь.

if( text === null || !text.textContent.includes('Sharon') ) {

Answer 2

Если textContent имеет значение null (например, как вы сказали, у контакта вместо этого есть ".member-insights__info"), !text.textContent.includes('Sharon') вызовет сообщение об ошибке.

Во второй версии эта строка может быть достигнута только если текст не нулевой.

Answer 3

|| Оператор будет оценивать 2-й аргумент, только если первый аргумент является ложным.

В вашем случае единственная разница между первым и вторым фрагментами кода - это порядок, в котором вы проверяете, является ли значение нулевым

То, что вам нужно сделать, это сначала проверить наличие нуля следующим образом:

if( text === null ||  !text.textContent.includes('Sharon')) {

Таким образом, он будет только проверять, если text включает в себя конкретный текст, как только он определил, что text не нуль