Javascript 如何在点击按钮时计算节省？_Javascript_Html

Javascript 如何在点击按钮时计算节省？

javascript html

Javascript 如何在点击按钮时计算节省？,javascript,html,Javascript,Html,我想通过滑块和文本框中的数据来计算节省的成本。我不知道哪里出了问题。我想按一下按钮计算节省下来的钱。如果我对JS函数有错误，请纠正我 <html> <body> <h1>Average Kilometres per day</h1> <input type="range" id="kms" min="5" max="80" value="5" step="1" onchange="kms(this.value)"/> <span

我想通过滑块和文本框中的数据来计算节省的成本。我不知道哪里出了问题。我想按一下按钮计算节省下来的钱。如果我对JS函数有错误，请纠正我

<html>
<body>
<h1>Average Kilometres per day</h1>
<input type="range" id="kms" min="5" max="80" value="5" step="1" onchange="kms(this.value)"/>
<span id="kmsValue">0</span>
<br>
<h1>Number Of Years</h1>
<input type="range" id="yrs" min="1" max="5" value="1" step="0.5" onchange="yrs(this.value)"/>
<span id="yrsValue">0</span>
</h1>
<br>
<table>
<tr>
<td><h3>Cost Of Electricity</h3><input type="text" id="elec" value="4.5"/></td>
<td><h3>Cost Of Fuel</h3><input type="text" id="fuel" value="63"/></td>
<td><h3>Fuel Efficiency</h3><input type="text" id="feff" value="45"/></td>
</tr>
<tr>
<button onClick="savings(kms,yrs,coe,cof,eff)">See my savings</button>
</tr>
<tr>
<td><h1>You Save :</h1></td>
<span id="savings">Savings Amount</span>
</tr>
</table>
<script type="text/javascript">
function kms(kmsValue)
{
    document.getElementById("kmsValue").innerHTML=kmsValue;
}
function yrs(yrsValue)
{
    document.getElementById("yrsValue").innerHTML=yrsValue;
}
function savings(nok,noy,e,f,fe)
{
    var nok=document.getElementById("kmsValue").value;
    var noy=document.getElementById("yrsValue").value;
    var e=(document.getElementById("elec").value)/50;
    var eff=(document.getElementById("fuel").value) / (document.getElementById("feff").value);
    var finalsavings;
    if(nok<45)
    {
        finalsavings=(kms*yrs*365);
    }
    else
    {
        finalsavings=0;
    }
    document.getElementById("savings").innerHTML=finalsavings;
}
</script>
</body>
</html>


平均每天公里数
0


年数
0


电费
燃料成本
燃油效率
看到我的存款了吗
您可以保存：
储蓄额
函数kms（kmsValue）
{
document.getElementById（“kmsValue”）.innerHTML=kmsValue；
}
函数yrs（yrsValue）
{
document.getElementById（“yrsValue”）.innerHTML=yrsValue；
}
功能节省（nok、noy、e、f、fe）
{
var nok=document.getElementById（“kmsValue”）.value；
var noy=document.getElementById（“yrsValue”）.value；
var e=（document.getElementById（“elec”）.value）/50；
var eff=（document.getElementById（“fuel”）.value）/（document.getElementById（“feff”）.value）；
var最终储蓄；
如果（nok您正在使用未定义的参数调用保存函数：
查看我的存款

参数kms、yrs、coe、cof、eff未在代码中定义，即使它们已定义，在函数体中也会创建覆盖它们的新变量
因此，只需将代码更改为：
函数savings（）{…}
和：
，它应该可以工作
[编辑]还有需要在某处定义的kms和yrs变量。
另外，我真的不明白您在计算noy、e、f、fe变量时试图做什么，因为您没有使用它们，并且在函数执行结束时，它们将超出范围…
您的错误
1.onClick=“savings（kms，yrs，coe，cof，eff）”
。在这一行中，您必须给出元素的Id
，但您给出了一些其他参数，如coe，cof，eff


正确的代码-->onClick=“节省（公里、年、电力、燃油、联邦燃油）。
2.储蓄金额
必须留在td
内。忽略td
外的元素
3.要获取元素内的文本而不是input
type，必须使用innerHTML

4.finalsavings=（kms*yrs*365）；
在这一行中，您没有定义变量kms
和yrs，您正在尝试访问它们。
正确的代码-->finalsavings=（nok*noy*365）；

建议：只要JS不起作用，就打开DEBUGGER>控制台查看错误。几乎所有调试器都会给出易于理解的错误
注意：还有一件事，在函数中获取参数时，不需要在函数中发送参数。
您面临的问题是什么？这里缺少分号onClick=“savings（kms，yrs，coe，cof，eff）”
应该是onClick=“savings（kms，yrs，coe，cof，eff）”
，事实上，当我单击按钮时，您的所有事件都缺少semi-colonI，没有得到任何响应：（.我的JS函数和调用它的方式是否正确？Luthando Loot，但这是有效的，onchange=“kms（this.value）”修改你的问题标题来描述你的问题。好的..我应该在哪里定义这些参数..你的想法不起作用..你能帮我修改吗？在你的工作流程中有意义的地方。如果你只是读取值，然后用getElementById初始化它们…请参阅我的节省和函数节省（）{var kms=document.getElementById（“kmsValue”）.value；var yrs=document.getElementById（“yrsValue”）.value；var coe=（document.getElementById（“elec”）.value）/50；var cof=（document.getElementById（“fuel”）.value）/（document.getElementById（“feff”）.value）；var财务节约；if（kms）