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>