• 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
311 wizyt
pytanie zadane 30 września 2021 w JavaScript przez Doge Gaduła (3,320 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 (269,120 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,320 p.)

A dlaczego tutaj działa?

1
komentarz 30 września 2021 przez Wiciorny Ekspert (269,120 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,320 p.)
"404 That page doesn't exist."
2
komentarz 30 września 2021 przez Doge Gaduła (3,320 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 (251,210 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ź 397 wizyt
pytanie zadane 29 września 2021 w C i C++ przez polandonion Mądrala (6,970 p.)
0 głosów
2 odpowiedzi 191 wizyt
pytanie zadane 3 kwietnia 2016 w C i C++ przez DragonCoder Nałogowiec (36,500 p.)
0 głosów
0 odpowiedzi 216 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...