为什么我的if语句与else if而不是OR运算符一起工作

Question

I wrote a small piece of JS in the console, to loop through recommended connections on LinkedIn and if the text contains a certain word, ignore that card, otherwise click the 'X' close button.

Initially I wrote it like this:

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 )

});

However, when it ran, it would sometimes error (whilst continuing to iterate) with 'Could not read textContent of null'.

However, when I wrote the code like this:

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 )

});

It runs absolutely fine and does what I want it to.

QUESTION: I can't understand why the first option doesn't work, as it seems more concise and theoretically should do the same thing?

I suspect it has something to do with the fact that on LinkedIn, some of the suggested contacts don't have a class of '.member-insights__count' and instead have '.member-insights__info'.

But, that should still make text resolve to null, right?

Any insight would be great!

Answer 1

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

What would you expect this code to do when text is null? It will crash because you can't access properties or methods of null.

You need to check for null first.

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

Answer 2

If textContent is null (eg as you said, the contact has '.member-insights__info' instead), !text.textContent.includes('Sharon') will cause the error message.

In the second version, that line can only be reached if the text isn't null.

Answer 3

The || operator will only evaluate the 2nd argument if the first argument is false.

In your case the only difference between the first and second code snippets is the order in which you check if the value is null

What you need to do is check for null first like this:

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

This way it will only check if text includes specific text once it's determined that text is not null