HTML / JavaScript计算器

Question

I am taking a WebGIS lecture this semester and could use some assistance with debugging my code. 我本学期正在参加WebGIS讲座，可以在调试代码时使用一些帮助。 It's a very simple HTML/js calculator, but it's giving me issues. 这是一个非常简单的HTML / js计算器，但给我带来了问题。 None of the buttons are displaying any numbers or executing any functions in my js code. 没有一个按钮在我的js代码中显示任何数字或执行任何功能。 Could anyone give me a hand with figuring out what's wrong? 谁能帮我找出问题所在？ I'm sure it's a simple fix, but the cones in my retinas are burning out trying to find it. 我敢肯定这是一个简单的解决方法，但是视网膜中的视锥细胞正在燃烧，试图找到它。

Thank you! 谢谢！

HTML: 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: 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 = '';
}

Answer 1

Can I make a few recommendations? 我可以提出一些建议吗？

You should have one JS method that captures all input values from the calculator. 您应该有一个JS方法可以捕获计算器中的所有输入值。 I would event propagation here, set the onclick handler on the parent instead of each element. 我将在此处进行事件传播，在父级而不是每个元素上设置onclick处理程序。 In this method look at the target and add to the display. 在这种方法中，查看目标并添加到显示中。 This is a better and cleaner approach then adding the inline onclick handlers with a preset parameter. 这是一种更好，更干净的方法，然后添加带有预设参数的内联onclick处理程序。

Also you don't need to have a unique nextVal Function for every key. 另外，您不必为每个键都具有唯一的nextVal函数。 Just pass this in as a parameter or set a data-attr value on the key and grab the value in your single handler. 只需将其作为参数传递或在键上设置数据属性值，然后在单个处理程序中获取该值。

Wire up this event handler by binding to a single class. 通过绑定到单个类来连接此事件处理程序。 Assign each key to the same class (eg input-value). 将每个键分配给相同的类（例如输入值）。 If you decide not to use event propagation - you can also bind an onclick handler to every element with this class. 如果您决定不使用事件传播-您也可以将onclick处理程序绑定到此类的每个元素。

Answer 2

The big problem right now is that you can't have multiple functions with the same name: 现在最大的问题是您不能使用同一个名称的多个函数：

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

You could change it to this: 您可以将其更改为：

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

There are many other things that could be done to this code, as Newse pointed out, but start with that... 正如Newse指出的那样，此代码还有很多其他事情可以做，但是首先要...

Update 更新资料

A second problem is the (many) lines like this: 第二个问题是这样的（许多）行：

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

That semicolon ends the statement, and hence the { } delimited section doesn't act as you expect. 该分号结束了该语句，因此{ }分隔的部分不能按您期望的那样起作用。

There is also a missing end-brace for the sum function, and finally, the id for the txtTrail element is misspelled. sum函数也缺少结尾括号，最后， txtTrail元素的id拼写错误。 Fixing all of those, will, I think, get you to a working state . 我认为解决所有这些问题将使您进入工作状态 。

But the points Newse is making in his answer, and similarly the ones in akinuri's Fiddle are quite important in developing your programming skills. 但是，Newse在他的回答中指出的要点，类似地，Akinuri的Fiddle中的要点对发展您的编程技能也很重要。

This code is extremely repetitive. 此代码非常重复。 One of the important maxims of programming is to keep your code DRY -- D on't R epeat Y ourself. 一个编程的重要格言是让你的代码干- d on't [R EPEATÿ我们自己。 There are any number of simple techniques which would help to remove the repetition in this code. 有许多简单的技术可以帮助消除此代码中的重复。

Also, many would object on similar grounds to the multiple event handlers you attach. 而且，许多人会以相似的理由反对您附加的多个事件处理程序。 There are techniques such as event delegation that would help clean this up. 有诸如事件委托之类的技术可以帮助清除此问题。

Some of these techniques will come as a matter of course during your time programming. 在您进行时间编程时，其中一些技巧是理所当然的。 But the best way to speed them along is to keep a constant critical eye on your own work, asking yourself always, "How could I have done this better?" 但是，加快工作进度的最好方法是始终对自己的工作保持批判的眼光，总是问自己：“我怎么能做得更好？”

The Fiddle posted above is not code an advanced developer would be proud of. 上面发布的小提琴不是高级开发人员会为之骄傲的代码。 But it's a working start. 但这是一个可行的开始。 So my challenge to you now is: what can you do to improve it? 因此，我现在面临的挑战是：您可以做些什么来改进它？

HTML / JavaScript计算器

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-02-16 02:26:20

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

Update 更新资料

HTML / JavaScript计算器

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-02-16 02:26:20

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

Update 更新资料

解决方案1
0 已采纳 2014-02-16 02:26:20

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