Oppgave 4

Lag et "nummerisk tastatur" ved å plassere ut 10 knapper med teksten 0,1,2,3 osv. Lag så et tekstfelt, der du kan skrive inn tall som 4327 ved å trykke på knappene. Hver gang du trykker på en knapp, skal altså sifferet som står på knappen legges til i tekstboksen.

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var o4Buttons = document.getElementById("o4-buttons").querySelectorAll(".btn");

    for (var i = 0; i < o4Buttons.length; i++) {
        o4Buttons[i].addEventListener("click", function() {
            document.getElementById("o4-result").value += this.innerHTML;
        })
    }

    document.getElementById("o4-reset").onclick = function() {
        document.getElementById("o4-result").value = "";
    }
}

HTML

                
<div id="o4-buttons" class="row">
    <button class="btn black">1</button>
    <button class="btn black">2</button>
    <button class="btn black">3</button>
    <button class="btn black">4</button>
    <button class="btn black">5</button>
    <button class="btn black">6</button>
    <button class="btn black">7</button>
    <button class="btn black">8</button>
    <button class="btn black">9</button>
    <button class="btn black">10</button>
    <button id="o4-reset" class="btn alert">Slett</button>
</div>