Løsningsforslag til kapittel 6

Her finner du løsningsforslag, råd og vink til oppgavene i kapittel 6.

6.1.1
<body>
    <button id="btn">Klikk på meg</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            btn.innerHTML = "Du trykket på meg";
        }
    </script>
</body>

6.1.2 a og b
<body>
    <button id="btnInn">Inn</button>
    <div id="tekstUt"></div>
    <script>
        var btnInn = document.getElementById("btnInn");
        var tekstUt = document.getElementById("tekstUt");
        var antall = 298;
        btnInn.onclick = function(){
            if(antall<300){
                antall++;
                tekstUt.innerHTML="Det er nå "+antall+" elever i lokalet";
            }
            else{
                tekstUt.innerHTML="Det er nå "+antall+" elever i lokalet";
            }
        }
    </script>
</body>

6.1.3
<body>
    <button id="btn">Vis bilde</button>
    <div id="visBilde"></div>
    <script>
        var btn = document.getElementById("btn");
        var visBilde = document.getElementById("visBilde");
        btn.onclick = function(){
            visBilde.innerHTML='<img src="bildefil.jpg">';//Bildefila må ligge i samme mappe som denne html-fila.
        }
    </script>
</body>

6.1.4
<body>
    <button id="btn1">Vis bilde1</button>
    <button id="btn2">Vis bilde2</button>
    <div id="bilde"></div>
    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var bilde = document.getElementById("bilde");
        function visBilde(evt){
            var knapp = evt.target;
            if(knapp.id==="btn1"){
                bilde.innerHTML='<img src="bildefil1.jpg">';//Bildefila må ligge i samme mappe som denne html-fila.
            }
            else{
                bilde.innerHTML='<img src="bildefil2.png">';//Bildefila må ligge i samme mappe som denne html-fila.
            }
        }
        btn1.onclick = visBilde;
        btn2.onclick = visBilde;
    </script>
</body>

6.1.5
<body>
    <button id="btn1" data-bilde="bilde1.jpg">Vis bilde1</button>
    <button id="btn2" data-bilde="bilde2.jpg">Vis bilde2</button>
    <div id="bilde"></div>
    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var bilde = document.getElementById("bilde");
        function visBilde(evt){
            var knapp = evt.target;
            var bildefil = knapp.getAttribute("data-bilde");
            bilde.innerHTML='<img src='+bildefil+'>';//Bildefilene må ligge i samme mappe som denne html-fila.
        }
        btn1.onclick = visBilde;
        btn2.onclick = visBilde;
    </script>
</body>

6.2.1 a, b, c og d
<body>
    <label for="inp">Skriv inn: </label>
    <input type="text" id="inp">
    <span id="tekstUt"></span>
    <script>
        var inp = document.getElementById("inp");
        var tekstUt = document.getElementById("tekstUt");
        inp.oninput = function(){
            tekstUt.innerHTML=inp.value; 
        }
        inp.onfocus = function(){
            inp.value="";
            tekstUt.innerHTML=""; 
        }
    </script>
</body>

6.2.2 Her vil du se ulike typer input.

6.2.3 Ta utgangspunkt i eksempelet på side 131. Hvis du vil velge på nytt må du slette innholdet først.

6.2.4 a
Ta utgangspunkt i eksempelet på side 133.

6.2.4 b
<body>
    <span>
        <label for="tallMS">Skriv inn fart i m/s: </label>
        <input type="number" id="tallMS">
    </span>
    <span id="txtUT"></span>
    <script>
        var tallMS = document.getElementById("tallMS"); //Referanse til input-element
        var txtUT = document.getElementById("txtUT"); //Referanse til span-element
        function omregning() { //Funksjonen
            var ms = Number(tallMS.value); //Gjør om til Number
            var kmt = ms*3.6; //Legger sammen tallene
            txtUT.innerHTML = kmt+" km/t"; //Viser summen i span-elementet
        }
        tallMS.oninput = omregning; //Starter funksjonen når vi skriver i innskrivingsfeltet
    </script>
</body>

6.2.5 Ta utgangspunkt i eksempelet på side 136.

6.2.6 Når du har prøver denne koden i nettleseren må du bevege på begge gliderne for at bildet blir uproporsjonalt.
<body>
    <div>
        <input type="range" id="bredde" min="0" max="400" value="300">
        <input type="range" id="hoyde" min="0" max="500" value="400">
    </div>
    <img src="sjiraff.jpg" id="bilde">//Gi bildet du finner på kode.cdu.no navnet sjiraff.jpg.
    <script>
        var bilde = document.getElementById("bilde");
        var bredde = document.getElementById("bredde");
        var hoyde = document.getElementById("hoyde");
        bredde.onchange=function(){
            bilde.width=bredde.value;
        }
        hoyde.onchange = function(){
            bilde.height=hoyde.value;
        }
    </script>
</body>

6.3.1 Ta utgangspunkt i eksempelet på side 139.

6.3.2 Ta utgangspunkt i eksempeler på side 140. Bruk gjerne fiskebildene fra eksempelet for å teste ut at du får til kodingen. De finner du på kode.cdu.no. 

6.3.3 Ta utgangspunkt i eksempelet på side 141-142.

6.3.4 a
<body>
    <select id="velgDag">
        <option value = "">Velg dag</option>
        <option value = "man">Mandag</option>
        <option value = "tirs">Tirsdag</option>
        <option value = "ons">Onsdag</option>
        <option value = "tors">Torsdag</option>
        <option value = "fre">Fredag</option>
        <option value = "lor">Lørdag</option>
        <option value = "son">Søndag</option>
    </select>
    <span id="info"></span>
    <script>
        var velgDag = document.getElementById("velgDag");
        var info = document.getElementById("info");
        velgDag.onchange = function() {
            var indeks = velgDag.selectedIndex; //Indeks til valgt størrelse
            var valgtDag = velgDag[indeks]; //Option-elementet som er valgt
            info.innerHTML = "Du skal møte opp: " + valgtDag.innerHTML;
        }
    </script>
</body>

6.3.4 b  Ta utgangspunkt i eksempelet på side 143-144.

6.4.1 Ta utgangspunkt i eksempelet på side 148.

6.4.2 Ta utgangspunkt i eksempelet på side 149.

6.4.3 Ta utgangspunkt i eksempelet på side 149-152.

6.4.4 
<body>
    <form id="frmReg"> <!-- Start på skjemaet -->
        <input type="text" id="epost" placeholder="Epost" required>
        <input type="text" id="alder" placeholder="Alder" required>
        <input type="text" id="navn" placeholder="Navn" required>
        <button type="submit">Registrer person</button> <!-- Knapp med type="submit" -->
    </form> <!-- Slutt på skjemaet -->
    <ul id="regListe"></ul>
    <script>
        var frmReg = document.getElementById("frmReg"); //Refererer til skjemaet
        var epost = document.getElementById("epost");
        var alder = document.getElementById("alder");
        var navn = document.getElementById("navn");
        var regListe = document.getElementById("regListe");
        frmReg.onsubmit = function(evt) {
            evt.preventDefault(); //Forhindrer at data sendes til en annen nettside
            regListe.innerHTML+="<li>Epost: "+epost.value+", Alder: "+alder.value+" år, Navn: "+navn.value+"</li>";
        }
    </script>
</body>

 6.4.5
<body>
    <form id="frmReg"> <!-- Start på skjemaet -->
        <input type="text" id="navn" placeholder="Navn" required>
        <input type="number" id="antall" placeholder="Antall" required>
        <input type="text" id="klokka" placeholder="Klokkeslett" required>
        <input type="date" id="dato" placeholder="Dato" required>
        <input type="text" id="epost" placeholder="Epost" required>
        <button type="submit">Registrer person</button> <!-- Knapp med type="submit" -->
    </form> <!-- Slutt på skjemaet -->
    <ul id="regListe"></ul>
    <script>
        var frmReg = document.getElementById("frmReg"); //Refererer til skjemaet
        var navn = document.getElementById("navn");
        var antall = document.getElementById("antall");
        var klokka = document.getElementById("klokka");
        var dato = document.getElementById("dato");
        var epost = document.getElementById("epost");
        var regListe = document.getElementById("regListe");
        frmReg.onsubmit = function(evt) {
            evt.preventDefault(); //Forhindrer at data sendes til en annen nettside
            regListe.innerHTML+="<li>Navn: "+navn.value+", Antall: "+antall.value+" pers., Klokka: "+klokka.value+", Dato: "+dato.value+" Epost: "+epost.value+",  </li>";
        }
    </script>
</body>