Kalkulator yang aku maksud di sini itu memang kalkulator yang sangat sederhana, hanya bisa menangani operasi dasar matematika seperti penjumlahan, pengurangan, perkalian dan pembagian. Model interfacenya seperti berikut :
Kita bisa memasukkan bilangan-bilangan yang ingin dijumlahkan, dikurangkan dll di dua kotak yang terletak di antara listbox berisi operator matematika tersebut. kemudian saat menekan tombol Submit maka hasil dari operasi matematika akan tampil di kotak paling bawah.
Nah, kode HTML dan Java Scriptnya adalah sebagai berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<script language="JavaSvript" type="text/javascript">
function getTextValue1() { var myForm=document.form1;
alert("Nilai Teks:" + myForm.operan1.value);
}
function getSelectedValue() { var myForm=document.form1;
alert("Nilai Selected:" + myForm.operator.value);}
function getTextValue2() { var myForm=document.form1;
alert("Nilai Teks:" + myForm.operan2.value);
}
function getOperationValue() { var myForm=document.form1;
if (myForm.operator.value == "+"){myForm.submit.value = parseInt (myForm.operan1.value)+ parseInt(myForm.operan2.value)}
if (myForm.operator.value == "-"){myForm.submit.value = parseInt (myForm.operan1.value)- parseInt(myForm.operan2.value)}
if (myForm.operator.value == "*"){myForm.submit.value = parseInt (myForm.operan1.value)* parseInt(myForm.operan2.value)}
if (myForm.operator.value == "/"){myForm.submit.value = parseInt (myForm.operan1.value)/ parseInt(myForm.operan2.value)}
myForm.hasil.value=myForm.submit.value;
}
</script>
<form name="form1" action="#">
<input type="text" name="operan1" onchange="getTextValue1();"/>
<!--input type="submit" value="submit" onclick="getTextValue()"/-->
<select name="operator" onchange="getSelectedValue();">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="operan2" onchange="getTextValue2();"/>
<input type="button" value="submit" onclick="getOperationValue();"/>
<input type="text" name="hasil" value=""/>
</form>
</body>
</html>
Sampai jumpa di posting berikutnya....v(^-^)v
1 komentar:
Artikel yg menarik....:)
salam knal yaa...
Posting Komentar