JavaScript -> instrukcja warunkowa "if" nie działa

Question

Witam, mam instrukcję warunkową:

if(document.querySelector(`.x`).style.boxShadow === '0 0 0 1px red')

która nie chce wskazać true, mimo wcześniejszego ustawienia

document.querySelector(`.x`).style.boxShadow = '0 0 0 1px red';

(zawsze wykonuje się "else") O co tutaj chodzi? Robię tutaj "switch" na przycisk

Całość:

(ten "for" jest w funkcji, która otrzymuje tę zmienną player, po wykonsolowaniu w funkcji "pawn_sum()" zmienne i tak są prawidłowe)

for(let i=1; i<=39; i++)
    {
        if(document.querySelector(`.player-${player}-owned-cards .owned-card${i}`))
        {
            document.querySelector(`.player-${player}-owned-cards .owned-card${i} .owned-card-color`).style.boxShadow = '0 0 0 1px red';
            document.querySelector(`.player-${player}-owned-cards .owned-card${i} .description`).style.boxShadow = '0 0 0 1px red';
            document.querySelector(`.player-${player}-owned-cards .owned-card${i}`).addEventListener('click', () => { pawn_sum(player, i); });
        }
    }

function pawn_sum(player, card)
{
    console.log(player, card);
    if(document.querySelector(`.player-${player}-owned-cards .owned-card${card} .owned-card-color`).style.boxShadow === '0 0 0 1px red')
    {
        document.querySelector(`.player-${player}-owned-cards .owned-card${card} .owned-card-color`).style.boxShadow = '0 0 0 1px lime';
        document.querySelector(`.player-${player}-owned-cards .owned-card${card} .description`).style.boxShadow = '0 0 0 1px lime';
        console.log('teraz lajm');
    }
    else 
    {
        document.querySelector(`.player-${player}-owned-cards .owned-card${card} .owned-card-color`).style.boxShadow = '0 0 0 1px red';
        document.querySelector(`.player-${player}-owned-cards .owned-card${card} .description`).style.boxShadow = '0 0 0 1px red';
        console.log('teraz red');
    }
    console.log(`plejer ${player} kliknął kartę`);
}

 

Answer 1

if(document.querySelector(`.x`).style.boxShadow === '0 0 0 1px red')

to jest równoważność, referencje porównujesz to zawsze będzie nieprawdą  

===  to operator ścisłego porównania równości w JavaScript, który zwraca false dla wartości, które nie są podobnego typu. Ten operator wykonuje rzutowanie typów dla równości. Jeśli porównamy 2 z „2” za pomocą ===, zwróci fałszywą wartość.

=== : oznacza identyczność, nie porównanie wartości, sprawdza również typ... 
Lekturka https://www.guru99.com/difference-equality-strict-operator-javascript.html

Comments

A dlaczego tutaj działa?

---

x.style.display zwraca "none" i to ma ten sam typ, dlatego zadziała 
 

The display property sets or returns the element's display type.

Właściwość wyświetlania ustawia lub zwraca typ wyświetlania elementu.

sprawdź co zwraaca QUERY SELECTOR DLA TWOJEGO x i wykonanie ".style.boxShadow "  

 

popatrz na to. https://jsfiddle.net/api/post/library/pure/

---

"404 That page doesn't exist."

---

Okej, teraz widzę, po ustawieniu

if(...style.boxShadow === 'red 0px 0px 0px 1px')

zwraca true. Nie wiedziałem, że to tak dziwnie może ustawić tym bardziej patrząc na to, że poprawnie kolor jest na końcu.

---

@Doge, w końcu, sam "znalazłeś" rozwiązanie. 

Pokusiłem się o napisanie a'la testu jak to jest z tym porównywaniem.

<div style="box-shadow: 10px 10px 8px black" data-nthChild="(1)"></div>
<div data-nthChild="(2)"></div>
<div data-nthChild="(3)"></div>
<div data-nthChild="(4)"></div>

div {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 1em;
}
div::before {
  content: attr(data-nthChild);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font: 900 2em monospace;
}
div:nth-child(2) {
  box-shadow: 10px 10px 8px black;
}
div:nth-child(3) {
  box-shadow: 10px 10px 8px #000;
}
div:nth-child(4) {
  box-shadow: 10px 10px 8px rgb(0, 0, 0);
}

const divs = document.querySelectorAll('div');

// div:nth-child(1) - style 
console.info('div:nth-child(1) - style');
let style = '10px 10px 8px black'
let boolean = (divs[0].style.boxShadow === style);
console.log(boolean, divs[0].style.boxShadow, style);

style = 'black 10px 10px 8px';
boolean = (divs[0].style.boxShadow === style);
console.log(boolean, divs[0].style.boxShadow, style);

// div:nth-child(2) - klasa
console.info('div:nth-child(2) - klasa');
style = '10px 10px 8px black';
boolean = (divs[1].style.boxShadow === style);
console.log(boolean, divs[1].style.boxShadow, style);

let computed = getComputedStyle(divs[1], null).getPropertyValue('box-shadow');
style = '10px 10px 8px black';
boolean = (computed === style);
console.log(boolean, computed, style);

style = 'rgb(0, 0, 0) 10px 10px 8px 0px';
boolean = (computed === style);
console.log(boolean, computed, style);

// div:nth-child(3) - klasa
console.info('div:nth-child(3) - klasa');
computed = getComputedStyle(divs[2], null).getPropertyValue('box-shadow');
style = '10px 10px 8px #000';
boolean = (computed === style);
console.log(boolean, computed, style);

style = 'rgb(0, 0, 0) 10px 10px 8px 0px';
boolean = (computed === style);
console.log(boolean, computed, style);

// div:nth-child(4) - klasa
console.info('div:nth-child(4) - klasa');
computed = getComputedStyle(divs[3], null).getPropertyValue('box-shadow');
style = '10px 10px 8px rgb(0, 0, 0)';
boolean = (computed === style);
console.log(boolean, computed, style);

style = 'rgb(0, 0, 0) 10px 10px 8px';
boolean = (computed === style);
console.log(boolean, computed, style);

style = 'rgb(0, 0, 0) 10px 10px 8px 0px';
boolean = (computed === style);
console.log(boolean, computed, style);