Javascript 为什么我的函数不能运行onclick？

所以我用Javascript制作了一台汽水机。 我需要跟踪每种苏打水的现存量，以及现存的总金额，并作为信用卡插入。它还需要能够做出改变

我写了大部分，但我的按钮似乎没有连接。这就像是从html到js的完全断开

以下是我项目的一部分： JSFIDLE

---

我想问题是我可能想得太多了。只需要第二双眼睛。

您的代码有很多问题，从JSFIDLE配置开始，接着是如何正确声明或调用所有函数：

你有：

function(addNickel){
    var availableCredit = availableCredit + 0.05;
}

以及：

这两种方法都将函数名放在括号中，而不是放在括号前面。代码应为：

function addNickel(){
    var availableCredit = availableCredit + 0.05;
}

以及：

所有函数声明和调用都是这样的，需要更新

而且，分号错误出现在不应该出现的地方，并且在需要提醒时使用提示来进行数学运算，但没有将答案存储在任何地方。导致大量冗余代码。你不需要一个数学函数来更新库存总量或每一瓶苏打水的现存量。只需制作一个函数并传入一个数学上可以处理的参数。一般的经验法则是将变化与不变化区分开来。你的算法不会随着苏打水的变化而变化，只有数量会变化

这仍然需要一些清理，但这里有一个工作版本，删除了冗余代码并清理了语法：

$function{ 变量sodaTotals=[10,10,10,10]； var cashOnHand=40； var currentCredit=0； var rootBeerTotal=document.getElementById'root\u beer\u instock'； var pepsiTotal=document.getElementById'pepsi_instock'； var orangeTotal=document.getElementById'orange_instock'； var mtDewTotal=document.getElementById'mt_dew_instock'； //将HTML元素放入映射到sodaTotals数组的数组中 var股票=[rootBeerTotal、pepsiTotal、orangeTotal、mtDewTotal]； var machineFunds=document.getElementById'funds'； var availableCredit=document.getElementById'available_credit'； //获取按钮引用： var$Btnickel=$nickel； 变量$btnDime=$dime； var$btnQuarter=$quarter； var$btnDollar=1美元； 风险值$BTN5美元=5美元； var$btnRB=$root\u啤酒； var$btnPep=百事可乐； var$btnOr=$orange； var$btnDew=百万吨露水； var$btnReload=$reload\u soda； var$btnReset=$reset\u COH； //为按钮连接事件处理程序。每个处理程序将调用单个数学函数 //但将正确的金额传递给它，以修改该金额 $Btnickel.onclick，函数{adjustPrice.05；}； $btnDime.onclick，函数{adjustPrice.1；}； $btnquerter.onclick，函数{adjustPrice.25；}； $btnDollar.onclick，函数{adjustPrice1；}； $btn5Dollar.onclick，函数{adjustPrice5；}； //数组索引从0开始，而不是从1开始 $btnRB.onclick，函数{dispenseSoda0；}； $btnPep.onclick，函数{dispenseSoda1；}； $btnOr.onclick，函数{dispenseSoda2；}； $btnDew.onclick，函数{dispenseSoda3；}； $btnReload.onclick，重新加载苏打水； $btnReset.onclick，resetCOH； //钱的东西 //不要在函数中声明变量，因为那样会清除旧值 var信用=零； //每个事务不需要函数，只需传递需要调整的值即可 功能调整价格金额{ 贷方+=金额； availableCredit.textContent=credit.toFixed2； machineFunds.textContent=credit.toFixed2； } //重置工具 函数重载{ 索达托尔=[10,10,10,10]； } 函数resetCOH{ 手头现金=40； 你把手伸进机器里，拿出似乎是垄断的钱。让它下雨吧！； } //每个函数代表一种不同的风味，称为“dispenseFlavor” 函数分发器{ 如果信用>=0.5{ //扣除库存金额 索达托[风味指数]； 股票[flavorIndex].textContent=sodaTotals[flavorIndex]； //扣除资金 信用-=0.50； document.getElementById'available_credit'.textContent=credit.toFixed2； //增加机器的平衡 手头现金+=0.50； 提醒“请从下面取苏打水。谢谢您的购买！”； //检查用户是否有任何额外的钱在机器上 ifcredit>0{ 如果确认，您是否想再次购买{ 请选择另一种苏打水。； }否则{ 提醒“请在下面收取退款”； document.getElementByIdrefund_tray.innerHTML=信用卡； var availableCredit=0； } }否则{ 提醒“资金不足，请增加额外资金”； } } } }; .网站名称{ 字体大小：3rem； 字体颜色：rgb200、200、200； } .当前级别{宽度：20%；} .付款容器{ 宽度：75%； 边框：纯黑2px； } .付款{ 显示器：flex； 弯曲方向：行； 证明内容：周围的空间； } .payment container p{text align:center；} .button区域容器{边框：纯黑2px；} .按钮容器按钮{ 身高：5雷姆； 宽度：12%； 背景尺寸：包含； 背景重复：无重复； } 按钮root_beer{背景图像：url'http://full.nick2go.com/img/root-beer.jpg'; } buttonpepsi{背景图像：url'http://full.nick2go.com/img/pepsi.jpg'; } ButtonRange{背景图像：url'http://full.nick2go.com/img/orange.jpg'; } buttonmt_dew{背景图像：url'http://full.nick2go.com/img/mt-dew.jpg'; } 加西亚苏打机 机器中的资金：

可用信用：

退款托盘：

单击以下按钮将钱插入机器：

$0.05 $0.10 $0.25 $1.00 $5.00

从下面选择苏打水：

剩余的root啤酒罐数：10罐

百事可乐剩余罐数：10罐

剩余的橙色罐头数量：10罐

剩余mt.dew的罐数：10

左边的按钮会将苏打库存重置为默认水平。右边的按钮将从机器中取出所有的钱。明智地选择

加苏打水机 抢劫机器！

---

不知道为什么它第一次不接受链接，但是：将相关代码直接作为文本发布在这里。并将其编辑成问题，不要将其发布到内容中。Carci是正确的。不过，我确实很快查看了您的代码。首先突出的是函数命名。当它应该是function AddNick时，您有function AddNick。这只是一个开始。您的代码似乎有几个问题；快速浏览一下，就会发现函数语法错误。定义时使用function foo而不是functionfoo，调用时使用foo而不是functionfoo，并且ID选择器不使用前导。另外，只要您的JSFIDLE脚本设置为onLoad-load-type，您在那里定义的函数就不会是全局函数；您需要执行window.foo=函数{…}，而不是函数foo{…}。或者，在没有仔细观察的情况下，将其改为无包裹，我不知道还有什么其他错误可能存在。其中大部分可能是我在试图弄清楚它为什么不起作用@你在哪里看到的？我的选择器中不应该有任何内容。此外，脚本主体在fiddle中是onLoad包装的，因此函数声明不是全局的：onclick=addnicle不会引用fiddle的onLoad包装函数中本地定义的addnicle函数。由事件侦听器处理是否更好？例如：button.addEventListenerclick，myScript；？是的，避免内联HTML事件处理属性。@NickGasiaRobitsch请查看我的更新答案以获得工作版本。谢谢@ScottMarcus您的工作版本帮助我找到了更好的方法来完成此项目。我有很多东西要学，但我想我在回顾你的例子时学到的比我上两节Javascript课学到的更多。先生，你是个圣人。

function addNickel(){
    var availableCredit = availableCredit + 0.05;
}

 onclick="addNickel()"