Oppgave 3

Lag et skjema der du kan skrive inn to tall i to tekstbokser, og så få ut summen(+), differansen(-), produktet(*) og kvotienten(/) når man trykker på en av tilsvarende fire knapper.

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var o3CalcBtns = document.querySelectorAll("#o3-add, #o3-sub, #o3-mul, #o3-div");

    for (var i = 0; i < o3CalcBtns.length; i++) {
        o3CalcBtns[i].addEventListener("click", function() {
            var o3Numb1 = parseInt(document.getElementById("o3-numb-1").value);
            var o3Numb2 = parseInt(document.getElementById("o3-numb-2").value);
            var o3Result = document.getElementById("o3-result");

            switch (this.id) {
                case "o3-add":
                    o3Result.value = o3Numb1 + o3Numb2;
                    break;

                case "o3-sub":
                    o3Result.value = o3Numb1 - o3Numb2;
                    break;

                case "o3-mul":
                    o3Result.value = o3Numb1 * o3Numb2;
                    break;

                case "o3-div":
                    o3Result.value = o3Numb1 / o3Numb2;
                    break;
                default:
                    o3Result.value = 'Error';
                    break;
            }
        });
    }
}

HTML

                
<div class="row">
    <div class="input-field-2">
        <input id="o3-numb-1" type="number" placeholder="Tall 1">
        <input id="o3-numb-2" type="number" placeholder="Tall 2">
    </div>
</div>
<div class="row font-small">
    <button id="o3-add" class="btn white col s3">+</button>
    <button id="o3-sub" class="btn white col s3">-</button>
    <button id="o3-mul" class="btn white col s3">x</button>
    <button id="o3-div" class="btn white col s3">/</button>
</div>
<div class="row">
    <div class="input-field">
        <input id="o3-result" type="text" placeholder="Svar" disabled>
    </div>
</div>