我一直堅持這一點,並不真正知道如何去解決它自己。我已經嘗試過使用螢火蟲並將其部分工作,但對於這麼小的腳本來說,這太令人沮喪和耗時了。也許我使用的開關語句錯誤...在JavaScript中使用一個對象製作一個簡單的計算器
本質上,我正在製作一個非常簡單的計算器,第一次使用對象... 任何一點都會有所幫助 - 任何推動正確的方向: )
非常感謝您的閱讀!
HTML文件是這樣的:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Homework 8</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="calc">
<p><label for="num1">First Number:<input type="text" id="num1" class="txt" /></label></p>
<p><label for="num2">Second Number: <input type="text" id="num2" class="txt"/></label></p>
<p><label for ="add"><input type="radio" name="operation" id="add" value="add"/>Add</label>
<label for ="sub"><input type="radio" name="operation" id="sub" value="sub"/>Subtract</label>
<label for ="mult"><input type="radio" name="operation" id="mult" value="mult"/>Multiply</label>
<label for ="div"><input type="radio" name="operation" id="div" value="div"/>Divide</label></p>
<p><input type="button" id="calculate" value="Do Calculation"/></p>
</div>
<div id="result"></div>
<script type="text/javascript" src="js/hw8.js"></script>
<script type="text/javascript">obj.init();</script>
</body>
</html>
JavaScript文件是這短短的腳本:
var obj = {
add : document.getElementById("add"),
sub : document.getElementById("sub"),
mult : document.getElementById("mult"),
div : document.getElementById("div"),
num1 : document.getElementById("num1"),
num2 : document.getElementById("num2"),
result : document.getElementById("result"),
calculate : document.getElementById("calculate"),
init : function(){
obj.calculate.onclick = obj.resultArea;
},
resultArea : function(){
var num1Value = parseFloat(num1.value);
var num2Value = parseFloat(num2.value);
if (!isNaN(obj.num1Value) = true || !isNaN(obj.num2Value) = true){
alert("Please enter only numbers in the First Number and Second Number fields!");
return;
}
switch(true){
case obj.add.checked : var ans = (num1Value + num2Value); break;
case obj.sub.checked : var ans = (num1Value - num2Value); break;
case obj.mult.checked : var ans = (num1Value * num2Value); break;
case obj.div.checked && num2Value != 0 : var ans = (num1Value/num2Value); break;
case obj.div.checked && num2Value = 0 : alert("cannot divide by zero"); break;
}
var p = document.createElement("p");
p.appendChild(document.createTextNode("The answer is" + ans));
obj.result.appendChild(p);
},
}
如果您將代碼放在jsFiddle上或將我們指向工作鏈接,這將會很有幫助。 – 2012-03-23 21:29:36
託管:http://jsfiddle.net/FyRrc/ – mellamokb 2012-03-23 21:30:05
由於HTML頁面的標題是「作業8」,這是一個作業問題嗎?如果是這樣,請將其標記爲。 – mellamokb 2012-03-23 21:30:44