Javascript-demo 2

Demon asiat käydään yhdessä tunnilla. Tarkoitus on tehdä yksi tiedosto johon lisätään pikku hiljaa demon osatehtävät. Aloita uusi tiedosto, tallenna se kansioon demot nimellä jsdemo2.html. Tee javascript omaan tiedostoon jsdemo2.js. Lähdemateriaalina käytetään w3schoolin javascript-materiaalia.

1. select ja if/else

Tee select-ohjain jossa on vähintään kolme eläintä. Näytä sivulla kuva jonka src-attribuutti vaihtuu kun select-ohjaimesta valitaan toinen eläin.

2. Elementin lisääminen

Lisää sivullesi div (id='kuvat') sekä painike. Kun painiketta painetaan luodaan uusi img-elementti ja lisätään se diville. Käytetään createElement()-toimintoa.

3. Toistorakenne

Jatketaan edelliseen kohtaan input-kenttä jonka avulla pyydetään käyttäjältä montako kuvaa halutaan lisätä. Kun painiketta painetaan tehdään kuvat toistorakenteen sisällä. Voit käyttää while- tai for-silmukkaa.