• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
+1 głos
370 wizyt
pytanie zadane 30 września 2021 w JavaScript przez Doge Gaduła (3,420 p.)

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ę`);
}

 

1 odpowiedź

+1 głos
odpowiedź 30 września 2021 przez Wiciorny Ekspert (275,550 p.)
 
Najlepsza

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

komentarz 30 września 2021 przez Doge Gaduła (3,420 p.)

A dlaczego tutaj działa?

1
komentarz 30 września 2021 przez Wiciorny Ekspert (275,550 p.)
edycja 30 września 2021 przez Wiciorny

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/

komentarz 30 września 2021 przez Doge Gaduła (3,420 p.)
"404 That page doesn't exist."
2
komentarz 30 września 2021 przez Doge Gaduła (3,420 p.)

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.

1
komentarz 1 października 2021 przez VBService Ekspert (255,440 p.)
edycja 1 października 2021 przez VBService

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

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);

Podobne pytania

0 głosów
1 odpowiedź 480 wizyt
pytanie zadane 29 września 2021 w C i C++ przez polandonion Mądrala (7,270 p.)
0 głosów
2 odpowiedzi 210 wizyt
pytanie zadane 3 kwietnia 2016 w C i C++ przez DragonCoder Nałogowiec (36,500 p.)
0 głosów
0 odpowiedzi 304 wizyt

92,834 zapytań

141,778 odpowiedzi

320,826 komentarzy

62,164 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...