Javascript kalkulator

Javascript je jedan od najpopularnih programskih jezika s kojim je moguće napraviti puno sa relativno malo koda. U ovom primjeru vidimo kako u javascript-u možemo napraviti jednostavni kalkulator bez upotrebe dodatnih fremeworka. Kako kalkulator radi pogledajte na demo stranici

Pogledajte u editoru

U html dijelu izradimo tablicu u kojoj se nalaze gumbi brojeva i matematičkih operatora, a korisnik upisuje vrijednosti u text box klikom ma određeni gumb. Prilikom klika na button u u onclik event-u pozivamo funkciju u kojoj se šalje vrijednost value (this.value) tj. vrijednost označena na gumbu. Klikom na gumb c vrijednost u textbox-u postavljamo na nula i bool variablu resrart postavljamo na true

Variablom var t = document.getElementById("i1"); selektiramo text box i1 te zatim čitamo vrijednost textboxa-a sa t.value. Kada korisnik klikne na gumb jednako (izračun dobivamo pomoču naredbe eval) pozivamo funkciju jednako

function jednako() {

var r1 = t.value.replace('×', '*').replace('÷', '/')

t.value = eval(r1) //restart = true

}



<!DOCTYPE html>
<html>

<head>
    <title>Kalkulator javascript</title>

    <style>
        .it {
            width: 225px;
            font-size: 16px;
            padding: 5px;
            text-align: right;
        }

        .iw {
            width: 55px;
            height: 55px;
            font-size: 25px;
        }
    </style>
</head>

<body>


    <h1>Kalkulator</h1>
    <p></p>
    <table>
        <tr>
            <td colspan="4"><input class="it" type="text" value="0" id="i1"></td>
        </tr>

        <tr>
            <td><input type="button" class="iw" value="c" onclick="c()"></td>
            <td><input type="button" class="iw" value="" onclick="l()"></td>
            <td><input type="button" class="iw" value="" onclick="l()"></td>
            <td><input type="button" class="iw" value="÷" onclick="l(this.value)"></td>
        </tr>

        <tr>
            <td><input type="button" class="iw" value="7" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="8" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="9" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="×" onclick="l(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" class="iw" value="4" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="5" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="6" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="-" onclick="l(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" class="iw" value="1" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="2" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="3" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="+" onclick="l(this.value)"></td>
        </tr>
        <tr>
            <td><input type="button" class="iw" value="±" onclick="p()"></td>
            <td><input type="button" class="iw" value="0" onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="." onclick="l(this.value)"></td>
            <td><input type="button" class="iw" value="=" onclick="jednako()"></td>
        </tr>

    </table>


    <script>

        var restart = true
        var t = document.getElementById("i1");

        function l(c) {
            if (restart == true) {
                t.value = c
                restart = false
            }
            else { t.value += c }
        }
        function jednako() {
            var r1 = t.value.replace('×', '*').replace('÷', '/')
            t.value = eval(r1)
            //restart = true
        }
        function c() {
            t.value = '0'
            restart = true
        }
        function p() {
            if (!t.value.startsWith('-')) {
                t.value = '-' + t.value
            }
        }

    </script>
</body>

</html>