Javascript JS根据用户输入执行计算

Javascript JS根据用户输入执行计算,javascript,Javascript,我有一个代码,我试图根据用户选择的输入值计算总值。这似乎很简单,但我无法从总数中反映出来。有人能告诉我哪里出了故障吗 函数计算(){ var panel=parseInt(document.getElementsById(“panel”).value); V=65; 面板T=面板*面板V; 降额_值=2; 总待机时间=配电盘*降额值; } document.getElementsById(“总时数”).innerHTML=总时数 结果 结果显示在这里这里有几个问题: 如果您查看了控制台日志,

我有一个代码,我试图根据用户选择的输入值计算总值。这似乎很简单,但我无法从总数中反映出来。有人能告诉我哪里出了故障吗

函数计算(){
var panel=parseInt(document.getElementsById(“panel”).value);
V=65;
面板T=面板*面板V;
降额_值=2;
总待机时间=配电盘*降额值;
}
document.getElementsById(“总时数”).innerHTML=总时数

结果

结果显示在这里

这里有几个问题:

如果您查看了控制台日志,您可能会发现大多数问题
对于starter,函数名为getElementById而不是getElementsById,因为应该只有一个元素具有唯一id,所以复数在这里没有意义

另一个是逻辑错误:单击按钮后,即执行
calculate
时,不更新内容

还有一个语法错误,即函数应该如何传递给HTML元素的属性。它需要是
functionName()
而不是
functionName

这就是修复此代码的简单方式:
var总小时数\待机时间=0;
函数计算(){
var panel=parseInt(document.getElementById(“panel”).value);
V=65;
面板T=面板*面板V;
降额_值=2;
总待机时间=配电盘*降额值;
document.getElementById(“total_hours”).innerHTML=total_hours\u standby;
}
document.getElementById(“total_hours”).innerHTML=total_hours\u standby

结果 结果显示在这里

这是打字错误

document.getElementsById

应该是

document.getElementById

您需要

  • 用于
    onclick=“calculate()”
    调用函数,而不仅仅是函数
  • 使用
    getElementById
    ,拼写问题
  • 声明所有变量
  • 最后将输出移到函数内部
函数计算(){
var panel=parseInt(document.getElementById(“panel”).value),
V=65,
面板T=面板*面板V,
降额_值=2,
总待机时间=配电盘*降额值;
document.getElementById(“total_hours”).innerHTML=total_hours\u standby;
}

结果

结果显示在此处

首先,您应该调用方法calculate

<button type="button" onclick="calculate()">Result</button>
结果
然后,添加这一行
document.getElementsById(“total_hours”).innerHTML=total_hours\u standby内部计算函数

Alos,键入错误:document.getElementById而不是document.getElementsById

  • getElementById是单数
  • 申报你的VAR
  • 用括号调用calculate()
  • 在函数内部赋值
  • 不需要
  • 这是一个带有eventListeners的版本,因为其他答案已经向您展示了如何修复您的版本

    函数计算(){
    var panel=+document.getElementById(“panel”).value;
    如果(面板==“”| | isNaN(面板))面板=0;
    设V=65;
    设panelt=panel*panelv;
    设降额_值=2;
    document.getElementById(“总小时”).textContent=(面板*减额值);
    }
    addEventListener(“加载”,函数(){
    document.getElementById(“计算”).addEventListener(“单击”,计算)
    calculate();//加载时运行
    })


    结果结果显示在这里:
    不应该
    文档。getElementsById(“总小时”)。innerHTML=总小时数
    be-in
    calculate
    函数之外的
    innerHTML
    更新。所以当脚本被解析时,它只运行一次,再也不会运行了。它立即告诉您其中的一个问题,根据JSFIDLE和浏览器控制台,存在许多错误。两个添加提示:用
    onClick=“calculate()”
    替换
    onClick=“calculate”
    并删除
    您有一个
    文档。getElementById(“total_hours”).innerHTML=total_hours\u standby太多在加载DOM内容时,为了显示总待机时间,您需要额外一个。然后,您可以调用calculate并将值设置为0(如果可以的话),这将是NaN,但基于OP的代码和想法,只是修复它,而不是通过验证输入来扩展它。这是一个简单的片段,所以,不需要像是对你的企业应用程序的超级复制功能的拉式请求一样来查看它:d除了“干”之外,我还能说什么呢?请不要回答打字错误问题。还有4个问题谢谢大家,我是新来的,听说getElementsById的复数形式是正确的。为了让它正常工作,我做了如下更正:calculate()而不是仅仅计算,单数形式的getElementById,函数中元素的move调用花括号,remove,parseInt'。我已经添加了更多的变量和基于此的计算,所有这些都是有效的。谢谢你的回答。只是试着拍手。。。钱会更好。。。