只有寫代碼,才能知道自己會(huì)多少,這是我寫的,用了兩種方法,一種用switch判斷,另外一種用了json
<!DOCTYPE html>
<html>
?<head>
? <title> 事件</title> ?
? <script type="text/javascript">
? ?function count(){
? ? ? ?
? ? //獲取第一個(gè)輸入框的值
? ? var num1= document.getElementById("txt1”).value;
//獲取第二個(gè)輸入框的值
var num2= document.getElementById("txt2”).value;
//獲取選擇框的值
var num3= document.getElementById("select”).value;
//獲取通過(guò)下拉框來(lái)選擇的值來(lái)改變加減乘除的運(yùn)算法則
var sum;
// switch(num3){
// ? ?case "+":
// ? ? ? ?sum=parseInt(num1)+parseInt(num2);
// ? ? ? ?break
// ? case "-":
// ? ? ? ?sum=parseInt(num1)-parseInt(num2);
// ? ? ? ?break
// ? case "*":
// ? ? ? ?sum=parseInt(num1)*parseInt(num2);
// ? ? ? ?break
// ? case "/":
// ? ? ? ?sum=parseInt(num1)/parseInt(num2);
// ? ? ? ?break
// }
? ? //JSON ?
此處會(huì)將”+,-,*,/“和”:“后面的內(nèi)容對(duì)應(yīng)起來(lái)。
????????const sumjg = {
? ? ? ? "+":parseInt(num1)+parseInt(num2),
? ? ? ? "-":parseInt(num1)-parseInt(num2),
? ? ? ? "*":parseInt(num1)*parseInt(num2),
? ? ? ? "/":parseInt(num1)/parseInt(num2)
? ? }
? ? //設(shè)置結(jié)果輸入框的值?
? ? document.getElementById(“fruit”).value=sum;
? ?}
? </script>?
// 注意要點(diǎn):
// 1、switch語(yǔ)句的使用————switch(表達(dá)式的值————輸出的結(jié)果),小括號(hào)里面的內(nèi)容要與下面的///case(值)做對(duì)比,若兩者值相等,則執(zhí)行case(值):后面的代碼體。此處還需注意case和""之間還有空格,少了這個(gè)空格就不會(huì)出結(jié)果
// 2、document.getElementById("fruit").value = sum;要寫在函數(shù)內(nèi)部。因?yàn)楹瘮?shù)調(diào)用,只調(diào)
//用函數(shù)的作用域的內(nèi)容。如果里面沒(méi)這句話,也就意味著沒(méi)有返回的結(jié)果。下面“=按鈕”則不出結(jié)果
// 3、下面html代碼里的“=按鈕”不要忘記調(diào)用點(diǎn)擊事件,不調(diào)用的函數(shù)是沒(méi)有用的。
// 4、獲取元素的值設(shè)置和獲取方法為:
// 賦值:document.getElementById(“id”).value = 1;
// 取值:var 變量名 = document.getElementById(“id”).value;
// 賦值及取值時(shí),id名必須要用“ ”雙引號(hào)括起來(lái)!
?</head>?
?<body>
? ?<input type='text' id='txt1' />?
? ?<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
? ?</select>
? ?<input type='text' id='txt2' />?
? ?<input type='button' value=' = ' onclick="count()"/> <!--通過(guò) = 按鈕來(lái)調(diào)用創(chuàng)建的函數(shù),得到結(jié)果-->?
? ?<input type='text' id='fruit' /> ??
?</body>
</html>
2019-08-14
? ?function count(){
? ? ? ?
? ? //獲取第一個(gè)輸入框的值
? ? var x=parseInt(document.getElementById("txt1").value);
//獲取第二個(gè)輸入框的值
var y=parseInt(document.getElementById("txt2").value);
//獲取選擇框的值
var operator=document.getElementById("select").value;
//獲取通過(guò)下拉框來(lái)選擇的值來(lái)改變加減乘除的運(yùn)算法則
var result="";
switch(operator){
? ?case '+':result=x+y;
? ?break;
? ?case '-':result=x-y;
? ?break;
? ?case '*':result=x*y;
? ?break;
? ?case '/':result=x/y;
? ?break;
? ?default:break;
}
? ? //設(shè)置結(jié)果輸入框的值?
? ? document.getElementById("fruit").value=result;
? ?}
? </script>?