堆棧內存溢出
  簡體   English   中英

HTML / JavaScript計算器

[英]HTML/Javascript Calculator

 原文  2014-02-16 02:15:52  2   2    javascript/ html

問題描述

我本學期正在參加WebGIS講座，可以在調試代碼時使用一些幫助。 這是一個非常簡單的HTML / js計算器，但給我帶來了問題。 沒有一個按鈕在我的js代碼中顯示任何數字或執行任何功能。 誰能幫我找出問題所在？ 我敢肯定這是一個簡單的解決方法，但是視網膜中的視錐細胞正在燃燒，試圖找到它。

謝謝！

HTML： 

<html>
<head>Calculator!</head>
<body>
    <script type="text/javascript" src="calculator.js"></script>
    <table>
        <tr>
            <td colspan="4">
                <input type="text" id="txtTotal" name="txtTotal" value="0"/>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <input type="text" id="txtTrai" name="txtTrail" disabled='true' value="0"/>
            </td>
        </tr>
        <tr>
            <td colspan="4">&nbsp;</td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btnl" name="bnt1" value="1" onclick="nextVal(1);" />
            </td>
            <td>
                <input type="button" id="btn2" name="bnt2" value="2" onclick="nextVal(2);" />
            </td>
            <td>
                <input type="button" id="btn3" name="bnt3" value="3" onclick="nextVal(3);" />
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btn4" name="bnt4" value="4" onclick="nextVal(4);" />
            </td>
            <td>
                <input type="button" id="btn5" name="bnt5" value="5" onclick="nextVal(5);" />
            </td>
            <td>
                <input type="button" id="btn6" name="bnt6" value="6" onclick="nextVal(6);" />
            </td>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btn7" name="bnt7" value="7" onclick="nextVal(7);" />
            </td>
            <td>
                <input type="button" id="btn8" name="bnt8" value="8" onclick="nextVal(8);" />
            </td>
            <td>
                <input type="button" id="btn9" name="bnt9" value="9" onclick="nextVal(9);" />
            </td>
            <td>
                <input type="button" id="clear" name="clear" value="C" onclick="clearCalc()" />
            </td>   
        </tr>
        <tr>
            <td>
                <input type="button" id="plus" name="plus" value="+" onclick="setFunction('plus');" />
            </td>
            <td>
                <input type="button" id="btn0" name="btn0" value="0" onclick="nextVal(0);" />
            </td>
            <td>
                <input type="button" id="minus" name="minus" value="-" onclick="setFunction('minus');" />
            </td>
            <td>
                <input type="button" id="equal" name="equal" value="=" onclick="sum();" />
            </td>   
        </tr>
    </table>
</body>
</html>

Javascript： 

var total = 0;
var funct = '';

function nextVal(1) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 1;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 1;
        txtTrail.value += ' ' + 1;
    }
    else if (funct == 'minus'); {
        total -= 1;
        txtTrail.value += ' ' + 1;
    }
    else {
        total = 1;
        txtTrail.value = 1;
    }
}

function nextVal(2) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 2;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 2;
        txtTrail.value += ' ' + 2;
    }
    else if (funct == 'minus'); {
        total -= 2;
        txtTrail.value += ' ' + 2;
    }
    else {
        total = 2;
        txtTrail.value = 2;
    }
}

function nextVal(3) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 3;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 3;
        txtTrail.value += ' ' + 3;
    }
    else if (funct == 'minus'); {
        total -= 3;
        txtTrail.value += ' ' + 3;
    }
    else {
        total = 3;
        txtTrail.value = 3;
    }
}

function nextVal(4) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 4;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 4;
        txtTrail.value += ' ' + 4;
    }
    else if (funct == 'minus'); {
        total -= 4;
        txtTrail.value += ' ' + 4;
    }
    else {
        total = 4;
        txtTrail.value = 4;
    }
}

function nextVal(5) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 5;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 5;
        txtTrail.value += ' ' + 5;
    }
    else if (funct == 'minus'); {
        total -= 5;
        txtTrail.value += ' ' + 5;
    }
    else {
        total = 5;
        txtTrail.value = 5;
    }
}

function nextVal(6) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 6;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 6;
        txtTrail.value += ' ' + 6;
    }
    else if (funct == 'minus'); {
        total -= 6;
        txtTrail.value += ' ' + 6;
    }
    else {
        total = 6;
        txtTrail.value = 6;
    }
}

function nextVal(7) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 7;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 7;
        txtTrail.value += ' ' + 7;
    }
    else if (funct == 'minus'); {
        total -= 7;
        txtTrail.value += ' ' + 7;
    }
    else {
        total = 7;
        txtTrail.value = 7;
    }
}

function nextVal(8) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 8;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 8;
        txtTrail.value += ' ' + 8;
    }
    else if (funct == 'minus'); {
        total -= 8;
        txtTrail.value += ' ' + 8;
    }
    else {
        total = 8;
        txtTrail.value = 8;
    }
}

function nextVal(9) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 9;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 9;
        txtTrail.value += ' ' + 9;
    }
    else if (funct == 'minus'); {
        total -= 9;
        txtTrail.value += ' ' + 9;
    }
    else {
        total = 9;
        txtTrail.value = 9;
    }
}

function nextVal(0) {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 0;
    var txtTrail = document.getElementById('txtTrail');

    if (funct == 'plus') {
        total += 0;
        txtTrail.value += ' ' + 0;
    }
    else if (funct == 'minus'); {
        total -= 0;
        txtTrail.value += ' ' + 0;
    }
    else {
        total = 0;
        txtTrail.value = 0;
    }
}

function setFunction(f) {
    var txtTrail = document.getElementById('txtTrail');
    funct = f;

    if (funct == 'true') {
        txt.Trail.value += ' +';
    }
    else if (funct == 'minus') {
        txt.Trail.value -= ' -';
    }
}

function sum() {
    var txtTotal = document.getElementById('txtTotal');
    if (txtTotal) {
        txtTotal.value = total;
    }

function clearCalc() {
    var txtTotal = document.getElementById('txtTotal');
    txtTotal.value = 0;

    var txtTrail =document.getElementById('txtTrail');
    txtTotal.value = 0;

    total = 0;
    funct = '';
}

2 個解決方案

解決方案1
 0 已采納  2014-02-16 02:26:20

我可以提出一些建議嗎？

您應該有一個JS方法可以捕獲計算器中的所有輸入值。 我將在此處進行事件傳播，在父級而不是每個元素上設置onclick處理程序。 在這種方法中，查看目標並添加到顯示中。 這是一種更好，更干凈的方法，然后添加帶有預設參數的內聯onclick處理程序。

另外，您不必為每個鍵都具有唯一的nextVal函數。 只需將其作為參數傳遞或在鍵上設置數據屬性值，然后在單個處理程序中獲取該值。

通過綁定到單個類來連接此事件處理程序。 將每個鍵分配給相同的類（例如輸入值）。 如果您決定不使用事件傳播-您也可以將onclick處理程序綁定到此類的每個元素。

解決方案2
 0  2014-02-16 02:48:23

現在最大的問題是您不能使用同一個名稱的多個函數： 

// This makes no sense
function nextVal(1) { ... }
function nextVal(2) { ... }
// ...

您可以將其更改為： 

function nextVal1() { ... }
function nextVal2() { ... }
// ...

正如Newse指出的那樣，此代碼還有很多其他事情可以做，但是首先要...

更新資料

第二個問題是這樣的（許多）行： 

else if (funct == 'minus'); {
   //                     ^
   // this semicolon      |
   // doesn't belong -----+

該分號結束了該語句，因此{ }分隔的部分不能按您期望的那樣起作用。

sum函數也缺少結尾括號，最后， txtTrail元素的id拼寫錯誤。 我認為解決所有這些問題將使您進入工作狀態 。

但是，Newse在他的回答中指出的要點，類似地，Akinuri的Fiddle中的要點對發展您的編程技能也很重要。

此代碼非常重復。 一個編程的重要格言是讓你的代碼干- d on't [R EPEATÿ我們自己。 有許多簡單的技術可以幫助消除此代碼中的重復。

而且，許多人會以相似的理由反對您附加的多個事件處理程序。 有諸如事件委托之類的技術可以幫助清除此問題。

在您進行時間編程時，其中一些技巧是理所當然的。 但是，加快工作進度的最好方法是始終對自己的工作保持批判的眼光，總是問自己：“我怎么能做得更好？”

上面發布的小提琴不是高級開發人員會為之驕傲的代碼。 但這是一個可行的開始。 因此，我現在面臨的挑戰是：您可以做些什么來改進它？

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML，CSS，JavaScript計算器 HTML/CSS/Javascript 計算器 帶有下拉菜單的HTML / Javascript計算器 Javascript / HTML計算器 HTML和JavaScript中的簡單計算器 基本 BMI 計算器 HTML/Javascript HTML Javascript 計算器計算錯誤 我的 HTML/Javascript 計算器無法工作 內置計算器的HTML / Javascript表 清除Javascript / HTML計算器中的值
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM