Zmiana koloru obramowania z listy select
Treść zadania
Na stronie znajduje się lista wyboru:<select id="wybierzKolor">
<option value="red">Czerwony</option>
<option value="green">Zielony</option>
<option value="blue">Niebieski</option>
</select>
oraz ramka <div id="ramka" style="border: 2px solid black;">Ramka testowa</div>. Na zdarzenie change listy wyboru przypisz wybrany kolor do właściwości borderColor ramki.
Co będzie oceniane
- Nasłuchiwanie zdarzenia change na elemencie #wybierzKolor.
- Odczyt wartości kontrolki select.
- Ustawienie właściwości style.borderColor elementu #ramka.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Zmiana koloru obramowania na zielony — atrybut #ramka = green
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Ustaw styl borderColor elementu #ramka na wartość wybraną z #wybierzKolor
Wskazówki
Wskazówka 1
Pobierz wartość wybranej opcji z kontrolki listy wyboru podczas zdarzenia informującego o zmianie stanu.
Wskazówka 2
Zarejestruj zdarzenie zmiany wyboru na elemencie listy, odczytaj właściwość przechowującą zaznaczoną opcję i przypisz ją do stylu koloru obramowania ramki.