用于触发基于表单的计算的Javascript按钮事件不起作用

很抱歉，有几个变量是荷兰语的，如果需要的话，我可以把它改成英语

此脚本应计算文本框“kosten”的费用。 费用通过应用百分比计算，这可以通过在组合框中选择一个数字来实现

出于某种原因，当点击按钮“totaalfooi”开始计算并得到结果时，什么都没有发生

Javascript代码：

函数berekenkosten（）{
var inputkosten=document.getElementById（'kosten'）；
var kosten=0；
if（inputkosten.value！=“”）{
kosten=parseInt（inputkosten.value）；
}
返回kosten；
}
var procentfooi=新数组（）；
procentfooi[“1”]=2；
procentfooi[“2”]=2.5；
procentfooi[“3”]=3；
procentfooi[“4”]=3.5；
procentfooi[“5”]=4；
函数berekenfooi（）{
var berekenfooi=0；
对于（var i=0；
i

Totale kosten

格拉德·范·特夫雷登海德作品5
1.
2.
3.
4.
5.

浏览一下您的代码，问题似乎在于这一行：

document.getElementById(totaalfooi).innerHTML = "Totale fooi bedraagt: $" + totaalfooi;

totaalfooi

是一个计算的结果，所以我猜您的意思是传递字符串：

document.getElementById('totaalfooi').innerHTML = "Totale fooi bedraagt: $" + totaalfooi;

此外，在这方面：

var totaalfooi=（berekenfooi/100）*berekenkosten（）

您将berekenfooi除以100，但berekenfooi是您之前定义的函数，而不是值。因此，它应该是：

var totaalfooi=（berekenfooi（）/100）*berekenkosten（）
您有多个语法错误，这些错误在下面的示例中已修复

不能将变量命名为与函数相同的名称，这些变量将相互覆盖

不能将函数变量视为值类型，必须调用函数

getElementById接受一个字符串参数，您正在传递未赋值的“变量”

您需要在select上输入一个ID，然后才能选择它。您正在迭代一个未绑定到DOM的数组

其他一些修改，这在代码段中起作用，如果您复制它，应该可以解决您的问题


函数berekenkosten（）{
var inputkosten=document.getElementById（'kosten'）；
var kosten=0；
if（inputkosten.value！=“”）{
kosten=parseInt（inputkosten.value）；
}
返回kosten；
}
函数berekenfooi（）{
var procentfooi=document.getElementById（“procentfooi”）；
var percentToReturn=procentfooi.options[procentfooi.selectedIndex].value；
console.log（百分比返回+”和“+procentfooi.length）；
返回分析浮点（百分比返回）；
}
函数berekentotal（）{
var totaalfooi=（berekenfooi（）/100）*berekenkosten（）；
document.getElementById（“totaalfooi”）.innerHTML=“Totale fooi bedraagt:$”+totaalfooi；
}
Totale kosten

格拉德·范·特夫雷登海德作品5
1.
2.
3.
4.
5.



将您的代码更改为

function berekenkosten() {
    var inputkosten = document.getElementById('kosten');
    var kosten = 0;
    if (inputkosten.value != "") {
        kosten = parseInt(inputkosten.value);
    }
    return kosten;
}

function berekenfooi() {
    var berekenfooi = 0,
    seloption = document.querySelector('#JSfee select'),
    procentfooi = [2, 2.5, 3, 3.5, 4]
    return procentfooi[seloption.selectedIndex];
}

function berekentotaal() {
    var totaalfooi = (berekenfooi()/100) * berekenkosten();
    document.getElementById('totaalfooi').innerHTML = "Totale fooi bedraagt: $" + totaalfooi;
}

您的BereKenTotal函数中存在一些语法错误，
berekenfooi
是一个函数而不是对象，因此必须使用（）调用，并且getElementById需要一个字符串来查找元素。使用此解决方案，您不需要select中的值，因此可以这样编写它们

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>


1.
2.
3.
4.
5.
这只是因为初始的
标记。我强烈建议使用.addEventlistener，而不是将其添加到html标记中。我已替换了该行，仍然没有结果。我已替换了该行，仍然没有结果。请将html中选项的值设置为希望应用为百分比的值。不需要使用单独的数组来支持此选项以及选项上的值。感谢您的修改，但遗憾的是，单击按钮后仍然没有结果。请在我的答案中使用我的代码片段。它起作用了。验证了十几次。如果有人花时间复制你的代码片段并修复它，那么就使用他们的代码片段。很可能他们花时间是有原因的。。。。刚刚在Chrome、IE和Firefox中再次验证。我的答案下面的代码段适用于所有浏览器。我刚刚添加了显示如何运行该代码段的图像。HTML和JavaScript都有变化。对我来说也很好。谢谢devconcept，这解决了我的问题！有！不在选项中包含值的原因以及存储百分比值的数组。此外，这还考虑了对HTML的更改，这些更改没有显示出来，也不是一个工作片段…@Binary查看原始代码，我意识到MarnikBruyndonckx试图做什么。他还使用数组来存储这些值。这就是我丢弃存储在DOM中的值的原因。我想我应该更新答案，指定不再需要这些值。