我正在從事一個網頁設計項目,我們必須製作一個「計算器」(除了我的教授實際上需要兩個輸入框,算術運算符的單選按鈕和一個提交按鈕。)更改複選框不影響javascript
我的代碼的工作原理與提交數字和獲得答案一樣,但僅適用於最後一個複選框(在此情況下爲「減去」),並且不管選中哪個單選按鈕,答案都不會更改。
我真的是JavaScript的初學者,所以我覺得真的很明顯,我失蹤了?任何幫助是極大的讚賞。
//arithmetic functions
\t \t var calculate_divide = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1/num2).toFixed(2);
\t \t }
\t \t
\t \t var calculate_multiply = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1*num2).toFixed(2);
\t \t }
\t \t
\t \t var calculate_add = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1 + num2).toFixed(2);
\t \t }
\t \t
\t \t var calculate_subtract = function() {
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value);
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value);
\t \t
\t \t \t document.getElementById('total').value = (num1 - num2).toFixed(2);
\t \t }
// if-else for checked boxes on submit
\t \t window.onload = function() {
\t \t
\t \t \t if(document.getElementById('divide').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_divide;
\t \t \t } else if(document.getElementById('multiply').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_multiply;
\t \t \t } else if(document.getElementById('add').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_add;
\t \t \t } else if(document.getElementById('subtract').checked){
\t \t \t \t document.getElementById('calculate').onclick = calculate_subtract;
\t \t \t }
\t \t }
<body>
\t <form name="calc">
\t <div id="calculator">
\t \t <div id="dispCont">
\t \t \t <input type="text" class="display" name="first_number" id="first_number" placeholder="First Number">
\t \t \t <input type="text" class="display" name="second_number" id="second_number" placeholder="Second Number">
\t \t </div>
\t \t
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="divide" value="/" checked='checked'>/</div>
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="multiply" value="*" checked='checked'>*</div>
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="add" value="+" checked='checked'>+</div>
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="subtract" value="-" checked='checked'>–</div>
\t \t
\t \t
\t \t <div class="buttons">
\t \t \t <input class="calcOpEq" type="button" id="calculate" name="calculate" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
\t \t \t <input type="text" class="display" name="total" id="total" placeholder="Total">
\t \t </div>
\t </div>
\t </form>
</body>
頁面加載你的'calculate_subtract'功能結合到點擊按鈕的事件。另外,document.calculator.ans.value應該用於什麼? – j08691
您正在測試哪個按鈕僅在頁面加載時被選中。這隻會執行一次,當您更改選擇時不會發生任何事情。按下計算按鈕時測試單選按鈕會更好。 – Shovalt