JavaScript, zmiana tekstu w divie

pytanie zadane 16 września 2016 w JavaScript przez Guardd Początkujący (350 p.)

Cześć, próbuję zmienić (właściwie, to wsadzić) tekst w diva, który jest wywoływany podczas kliknięcia w zdjęcie kota, ale nie widzę, gdzie popełniam błąd. Zatrzymałem się na takiej prostej rzeczy i kombinuję już godzinę.

<body>
        <img id="cat-pic" src="#zdjecie kota#">
        <br>
        
        <div id="cat-chat"></div>
        
        <script>
        var catEl = document.getElementById("cat-pic");
        
        var onCatClick = function(){
            cat-chat.textContent = "Miau";
        }
       
       
        </script>
    </body>

1 odpowiedź

odpowiedź 16 września 2016 przez niezalogowany
wybrane 16 września 2016 przez Guardd

Najlepsza

Zabrakło na końcu skryptu przypisania funkcji do zdarzenia.

catEl.addEventListener( 'click' , onCatClick );

komentarz 16 września 2016 przez niezalogowany

Później zajrzyj w konsolę, bo funkcja rzuci błędem : )

komentarz 16 września 2016 przez Guardd Początkujący (350 p.)

Tak, właśnie miałem pisać, że rzuciło mi:

Invalid left-hand side in assignment

Czy nie mogę wziąć ID "cat-chat", ponieważ jest tam myślnik? Czytałem, że w JS nie używa się takich oznaczeń. Lepiej np. catChat. To o to chodzi?

komentarz 16 września 2016 przez niezalogowany

Zgadza się. W JS używa się głównie camelCase.

komentarz 16 września 2016 przez niezalogowany

Druga sprawa, przypisz element z id 'cat-chat' do zmiennej, i dopiero na niej zmieniaj tekst

komentarz 16 września 2016 przez Guardd Początkujący (350 p.)

Na CodePenie wszystko działa, kiedy zmienię ID na camelCase, ALE przerabiam sobie kurs na KhanAcademy i mam te ID narzucone, przez twórców. Chcąc je zmienić wyświetla mi się komunikat:

Hm, zmieniłeś id div-a 'cat-chat'? Chcielibyśmy, żebyś zostawił tę nazwę i wyszukiwał ten element po tym id.

Poniżej zamieszczam cały, cały kod:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Challenge: Cat Clicker</title>
        <style>
            body {
                font-family: Arial, sans-serif;  
            }
        </style>
    </head>
    <body>
        <h2>Pet me!</h2>
        <img id="cat-pic" src="https://www.kasandbox.org/programming-images/animals/thumbs/cat.png">
        <br>
        
        <div id="cat-chat"></div>
        
        <script>
        var catEl = document.getElementById("cat-pic");
        
        var onCatClick = function(){
            cat-chat.textContent = "Miau";
        
        }
        catEl.addEventListener( "click" , onCatClick );
       
        </script>
    </body>
</html>