HTML/Javascript计算器

这学期我要上一堂WebGIS课，在调试代码时需要一些帮助。这是一个非常简单的HTML/js计算器，但它给了我一些问题。在我的js代码中，没有一个按钮显示任何数字或执行任何函数。谁能帮我弄清楚出了什么问题？我相信这是一个简单的解决办法，但我的视网膜中的视锥细胞正在燃烧，试图找到它

谢谢大家!

HTML:

---

我能提出一些建议吗

您应该有一个JS方法来捕获计算器中的所有输入值。我想在这里进行事件传播，在父元素而不是每个元素上设置onclick处理程序。在此方法中，查看目标并添加到显示中。与添加带有预设参数的内联onclick处理程序相比，这是一种更好、更干净的方法

此外，您不需要为每个键都具有唯一的nextVal功能。只需将其作为参数传入，或在键上设置数据属性值，然后在单个处理程序中获取该值

---

通过绑定到单个类来连接此事件处理程序。将每个键分配给同一类（例如输入值）。如果决定不使用事件传播，还可以将onclick处理程序绑定到此类的每个元素。

现在的大问题是不能有多个同名函数：

// 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

函数还缺少一个结束大括号，最后，

txtrail

元素的id拼写错误。我认为，解决所有这些问题将使您进入一个

---

但是Newse在他的回答中提出的观点，同样地，akinuri的提琴中的观点对于开发您的编程技能非常重要

这段代码非常重复。编程的一条重要准则是保持代码干燥--D在自己身上。有许多简单的技术可以帮助消除代码中的重复

此外，许多人会以类似的理由反对您附加的多个事件处理程序。有一些技术，如事件委派，可以帮助清理这一问题

在您的时间编程过程中，这些技术中的一些是理所当然的。但加速他们前进的最好方法是对自己的工作保持一个持续的批评眼光，总是问自己，“我怎么能做得更好呢？”

---

上面发布的代码不是一个高级开发人员会感到自豪的代码。但这是一个工作的开始。因此，我现在向您提出的挑战是：您能做些什么来改进它？

谢谢您指出这一点。继续前进，改变了一切；还是不走运。这里有点小东西让你开始。如果我不忙的话，我会给你一个完整的工作版本。请原谅我的无知，因为我只使用了一个星期的Javascript，但是我该怎么做呢？我同意，多个nextVal函数的代码看起来非常混乱，但我不知道如何压缩它们。“我查了一下冒泡/事件传播，但这完全出乎我的意料。@Bradley_Jay他说的基本上是重做你的项目，哈哈。”。试着看看一个现有的计算器项目，它可能会给你一个想法，好吧。我犹豫是否重写它，只是因为我的实验室助教给了我们一些他希望从我这样的初学者那里看到的函数大纲。不确定重写我们在实验室里没有学过的代码是否会对我的成绩产生负面影响。@Newse：虽然这些都是很好的建议，但我认为综合起来，它们不适合海报的级别。如果能看到一篇博客文章，将这段代码一步一步地更新，那将非常有趣。但是OP正在寻找一个更简单的答案来回答“为什么这个不起作用？”看看这个-我对你的代码做了一些修改，以使基本概念起作用：谢谢你指出这一点。我继续将所有函数重写为您在帖子中推荐的函数，并相应地更改了onclick。还是没有骰子。这可能是Javascript和HTML文件不能很好地相互配合的问题吗？我想我在.html文件中正确链接了.js，它们都在我桌面上的同一个文件夹中。如果你不熟悉调试控制台，在大多数浏览器中，你可以按F12启动它们。如果您还没有检查Javascript控制台是否有任何错误，那么您可能应该检查一下。另一种可能是将代码发布在、或类似的沙箱站点上。这让人们有机会看到他们建议的改变可能会有什么帮助，也可能不会有什么实际帮助。

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

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