事件響應練習（慕課網題目）
阿新 • • 發佈：2017-09-09
通過 取值 font data 按鈕 turn del att get
編程練習
使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數後，點擊第三個輸入框能給出2個整數的加減乘除。
提示：獲取元素的值設置和獲取方法為：例：賦值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；
任務
第一步： 創建構建運算函數count()。
第二步： 獲取兩個輸入框中的值和獲取選擇框的值。
提示：document.getElementById( id名 ).value 獲取或設置 id名的值。
第三步： 獲取通過下拉框來選擇的值來改變加減乘除的運算法則。
提示：使用switch判斷運算法則。
第四步： 通過 = 按鈕來調用創建的函數，得到結果。
註意: 使用parseInt()函數可解析一個字符串,並返回一個整數。
我的解答
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 事件</title> <script type="text/javascript"> function count(){ var text1 = document.getElementById("txt1").value;//獲取第一個輸入框的值 var text2 = document.getElementById("txt2").value;//獲取第二個輸入框的值 var select = document.getElementById("select"); var index = select.selectedIndex; var vel = select.options[index].value;//獲取選擇框的值 var a = parseInt(text1);var b = parseInt(text2); function valueX() { switch (vel){//獲取通過下拉框來選擇的值來改變加減乘除的運算法則 case "+": var x= a+b; return x; case "-": var x= a-b; return x; case "*": var x= a*b; return x; case "/": var x= a/b; return x; } } document.getElementById("fruit").setAttribute("value",valueX());//設置結果輸入框的值 } </script> </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()" /> <!--通過 = 按鈕來調用創建的函數，得到結果--> <input type=‘text‘ id=‘fruit‘ /> </body> </html>
事件響應練習（慕課網題目）