<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>計算器</title>
????<script?type="text/javascript">
????????var?a?=?parseInt(document.getElementById("t1").value);
????????var?b?=?parseInt(document.getElementById("t2").value);
????????function?count(){
????????????var?ret;
????????????switch(?document.getElementById("select").value){
????????????????case"+":ret=a+b;break;
????????????????case"-":ret=a-b;break;
????????????????case"*":ret=a*b;break;
????????????????case"/":ret=a/b;break;
????????????}
????????????document.getElementById("t3").value=ret;
????????}
????</script>
</head>
<body>
????<form>
????????<input?type="text"?id="t1">
????????<select?id="select">
????????????<option?value="+">+</option>
????????????<option?value="-">-</option>
????????????<option?value="*">*</option>
????????????<option?value="/">/</option>
????????</select>
????????<input?type="text"?id="t2">
????????<input?type="button"?value="="?onclick="count()">
????????<input?type="text"?id="t3">
????</form>
</body>
</html>
2016-12-01
你把a和b的獲取定義在<script type="text/js"></script>里面表示沒加載頁面之前就開始獲取t1與t2的值,所以獲取的結(jié)果肯定是空的,因為頁面沒加載完,你肯定還沒輸入這兩個數(shù)字呢,你可以在你這個有錯誤的代碼var a和var b 的后面分別加上alert(a);alert(b);即
var?a?=?parseInt(document.getElementById("t1").value); ? alert(a);
????????var?b?=?parseInt(document.getElementById("t2").value); alert(b);其彈出來的都是空值。調(diào)試下就可以知道了
所以只要把a和b的獲取定義在函數(shù)里面就可以 ?其更改的結(jié)果為:
function count(){
? ? ? ? ? ? var a = parseInt(document.getElementById("t1").value);
? ? ? ? ? ? var b = parseInt(document.getElementById("t2").value);
? ? ? ? ? ? var ret;
? ? ? ? ? ? switch(document.getElementById("select").value){
? ? ? ? ? ? ? ? case"+":ret=a+b;break;
? ? ? ? ? ? ? ? case"-":ret=a-b;break;
? ? ? ? ? ? ? ? case"*":ret=a*b;break;
? ? ? ? ? ? ? ? case"/":ret=a/b;break;
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById("t3").value=ret;
? ? ? ? }
看了一下其實你可以在t3的標(biāo)簽里加入onfocus="count()"事件,這樣你直接點擊最后一個文本框就可以得到答案,不需要非要按下等于按鈕
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>計算器</title>
? ? <script type="text/javascript">
? ? ? ?
? ? ? ? function count(){
? ? ? ? ? ? var a = parseInt(document.getElementById("t1").value);
? ? ? ? ? ? var b = parseInt(document.getElementById("t2").value);
? ? ? ? ? ? var ret;
? ? ? ? ? ? switch(document.getElementById("select").value){
? ? ? ? ? ? ? ? case"+":ret=a+b;break;
? ? ? ? ? ? ? ? case"-":ret=a-b;break;
? ? ? ? ? ? ? ? case"*":ret=a*b;break;
? ? ? ? ? ? ? ? case"/":ret=a/b;break;
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById("t3").value=ret;
? ? ? ? }
? ? </script>
</head>
<body>
? ? <form>
? ? ? ? <input type="text" id="t1">
? ? ? ? <select id="select">
? ? ? ? ? ? <option value="+">+</option>
? ? ? ? ? ? <option value="-">-</option>
? ? ? ? ? ? <option value="*">*</option>
? ? ? ? ? ? <option value="/">/</option>
? ? ? ? </select>
? ? ? ? <input type="text" id="t2">
? ? ? ? <input type="button" value="=" onclick="count()">
? ? ? ? <input type="text" id="t3">
? ? </form>
</body>
</html>
你可以參考下,希望我的解釋能幫助到你。
2016-12-01
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>計算器</title>
? ? <script type="text/javascript">
? ? ? ?
? ? ? ? function count(){
? ? ? ? ? ? var a = parseInt(document.getElementById("t1").value);//寫在函數(shù)里面,頁面加載完,調(diào)用函數(shù)的時候才獲取t1的值
? ? ? ? ? ? var b = parseInt(document.getElementById("t2").value);//寫在函數(shù)里面,頁面加載完,調(diào)用函數(shù)的時候才獲取t2的值
? ? ? ? ? ? var ret;
? ? ? ? ? ? switch(document.getElementById("select").value){
? ? ? ? ? ? ? ? case"+":ret=a+b;break;
? ? ? ? ? ? ? ? case"-":ret=a-b;break;
? ? ? ? ? ? ? ? case"*":ret=a*b;break;
? ? ? ? ? ? ? ? case"/":ret=a/b;break;
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById("t3").value=ret;
? ? ? ? }
? ? </script>
</head>
<body>
? ? <form>
? ? ? ? <input type="text" id="t1">
? ? ? ? <select id="select">
? ? ? ? ? ? <option value="+">+</option>
? ? ? ? ? ? <option value="-">-</option>
? ? ? ? ? ? <option value="*">*</option>
? ? ? ? ? ? <option value="/">/</option>
? ? ? ? </select>
? ? ? ? <input type="text" id="t2">
? ? ? ? <input type="button" value="=" onclick="count()">
? ? ? ? <input type="text" id="t3" ?onfocus="count()">//這里加個onfocus事件(個人建議)
? ? </form>
</body>
</html>
2016-12-01
<script?type="text/javascript">
? ? ??
????????function?count(){
????????????var?ret;
?var?a?=?parseInt(document.getElementById("t1").value);
????????var?b?=?parseInt(document.getElementById("t2").value);
????????????switch(?document.getElementById("select").value){
????????????????case"+":ret=a+b;break;
????????????????case"-":ret=a-b;break;
????????????????case"*":ret=a*b;break;
????????????????case"/":ret=a/b;break;
????????????}
????????????document.getElementById("t3").value=ret;
????????}
????</script>