Pętla po kolekcji elementów DOM

pytanie zadane 10 grudnia 2019 w JavaScript przez matedoo Nowicjusz (210 p.)

Hej, robię kurs z JS i mam problem z jednym z zadań.

Treść zadania:

Na stronie masz listę .list. Na podstawie atrybutu data-status w każdym elemencie strong ustaw:

jeżeli data-status jest równe up do elementu strong wstaw tekst "dodatni" pisany kolorem zielonym
jeżeli data-status jest równe no-change do elementu strong wstaw tekst "bez zmian" pisany kolorem niebieskim
jeżeli data-status jest równe down do elementu strong wstaw tekst "ujemny" pisany kolorem czerwonym

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kurs JS - DOM - właściwości</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js"></script>
</head>
<body>

    <ul class="list">
        <li data-status="up"> Shirleen Garfoot<strong class="status"></strong></li>
        <li data-status="no-change">Lissi Kovnot <strong class="status"></strong></li>
        <li data-status="up">Karena Denys <strong class="status"></strong></li>
        <li data-status="down">Diannne Ainsby <strong class="status"></strong></li>
        <li data-status="up">Marj Adel <strong class="status"></strong></li>
        <li data-status="no-change">Roseann Saer <strong class="status"></strong></li>
        <li data-status="up">Allene Worlidge <strong class="status"></strong></li>
        <li data-status="up">Wildon Lidell <strong class="status"></strong></li>
    </ul>

</body>
<script>
    

    let list = document.querySelectorAll('.list li');
    let count = 0;

    for (const el of list) {
        if (el.hasAttribute('[data-status = up]')) {
            
            el.firstElementChild.style.color = "green";
            el.firstElementChild.innerText = 'dodatni';
            
            
        }
        else if(el.hasAttribute('[data-status = no-change]')) {
            el.firstElementChild.style.color = "blue";
            el.firstElementChild.innerText = 'bez zmian';
        }
        else{
            el.firstElementChild.style.color = "red";
            el.firstElementChild.innerText = 'ujemny'; 
        }
        count++;
        
    }
    
</script>
</html>

Niestety zatrzymałem się w miejscu, wszystkie elementy dostają ostatni warunek else. Wie ktoś może gdzie popełniam błąd ?

2 odpowiedzi

odpowiedź 10 grudnia 2019 przez Kamil Łydka Stary wyjadacz (13,600 p.)
wybrane 10 grudnia 2019 przez matedoo

Najlepsza

hasAttribute()

sprawdza jedynie czy element ma określony atrybut. Nie sprawdza jego wartości. W uproszczeniu mówiąc szuka danej nazwy atrybutu. Więc jedyne co możesz zrobić, to

hasAttribute('data-status')

no i będziesz miał zwrócone true dla tych elementów co mają taki atrybut (w tym przykładzie dla kazdego).

No, a jeśli chcesz rozwiązać zadanie to skorzystaj z .dataset

na przykład:

if (el.dataset.status === "up")

Tu poprawiam jeszcze ważny błąd == (a nawet ===), a nie operator przypisania.

Ewentualnie możesz użyć getAttribute

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

odpowiedź 10 grudnia 2019 przez adrian17 Ekspert (344,860 p.)

if (el.hasAttribute('[data-status = up]')) {

To dosłownie sprawdza czy element ma atrybut o nazwie "[data-status = up]". Ale nie ma takiego, jest atrybut data-status o wartości `up`. "[data-status = up]" to jest składnia selectorów.

Zamiast tego, możesz skorzystać z tego, że wszystkie wartości atrybutów data-* trafiają do pola .dataset, więc wystarczy sprawdzić czy el.dataset.status jest równy "up".