Po wykonaniu fragmentu kodu HTML i JavaScript na stronie zostanie wyświetlony obraz z pliku <img id="obraz" src="kol1.jpg">
<button id="przycisk">Przycisk</button>
<script>
document.getElementById("obraz").src = "kol2.jpg";
</script>
Dobra robota, zgadłeś! W tym skrypcie JavaScript używamy metody getElementById, żeby znaleźć obraz na stronie o identyfikatorze 'obraz'. Później zmieniamy jego atrybut 'src' na 'kol2.jpg'. To znaczy, że po uruchomieniu tego kodu wyświetli się właśnie ten obrazek. Fajnie jest to zrozumieć, bo pokazuje, jak można dynamicznie zmieniać rzeczy na stronie za pomocą JavaScript. Takie umiejętności są super ważne, gdy tworzymy interaktywne strony, które reagują na to, co robi użytkownik. Na przykład, można by zmienić obraz, gdy ktoś najedzie na niego myszką albo kliknie przycisk. Pamiętaj też, żeby zawsze pomyśleć o dostępności – jeśli obraz ma jakieś ważne informacje, warto dodać alternatywne opisy dla osób korzystających z czytników ekranu.
Niestety, nie trafiłeś. Wybierając 'kol1.jpg', mylisz się co do działania JavaScript w kontekście zmiany elementów na stronie. Skrypt używa getElementById, żeby znaleźć obraz o identyfikatorze 'obraz', a potem zmienia atrybut 'src' na 'kol2.jpg'. Tutaj nie ma żadnej interakcji z użytkownikiem, która mogłaby zmienić obrazek. W praktyce jednak, JavaScript daje nam możliwość dynamicznego modyfikowania elementów na stronie, co jest kluczowe przy tworzeniu takich interaktywnych stron. Na przykład, można wykorzystać tą samą metodę do zmiany obrazu, gdy ktoś na niego najedzie albo wciśnie przycisk. W tym przypadku jednak, to nie jest to, co się dzieje. Warto też zrozumieć, że 'kol1.jpg' to nie jest dobra odpowiedź, bo to obraz, który miałby być zmieniony, a nie ten, który się wyświetli.