如何解决谁能帮助我显示此计算结果?的JavaScript
嗨,有人可以正确运行此代码吗? 我学会了做类似的事情 https://www.youtube.com/watch?v=vkBiEuZSq9s 但这不是贷款,这是一个简单的计算 SMAL应为* 0.5 气体* 6 保持简历不变
结果应为SMAL + GAS + CV
我是JavaScript新手,需要您的帮助
感谢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<script>
function calculate(){
var GAS = document.getElementById('GAS').value;
var SMAL = document.getElementById('SMAL').value;
var CV = document.getElementById('CV').value;
var GASAcal = (GAS * 6);
var SMALcal = (SMAL * 0.5);
var CVcal = (CV);
var total_score = CVcal + GAScal + SMALcal;
if(total_score ismap)
{
document.getElementById('total_score').innerHTML = "Total score = "+total_score;
}
}
</script>
</head>
<body dir="rtl">
<p> GAS <br><input id="GAS" type="number" min="0" max="5" step="" onchange="calculate" ></p>
<p> SMAL <br><input id="SMAL" type="number" min="0" max="100" value="1" onchange="calculate"></p>
<p> CV <br><input id="CV" type="number" min="1" max="20" value="1" onchange="calculate"></p>
<h2 id="total_score"></h2>
</body>
</html>
解决方法
几件事。
- 您的JavaScript中有错误。就像另一个人所说,熟悉您的浏览器开发工具,并使用console.log()和/或alert()。
- 您偶然发现了Input元素的oninput事件一个古老的问题。这是越野车,并且取决于浏览器和浏览器版本。
无论如何,在不涉及太多细节的情况下(我相信您可以在网络上找到答案),这里包含了html页面的有效版本。我的JavaScript逻辑是一个穷人版本,因此您可以看到我为捕获oninput事件所做的事情。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var calculate;
document.addEventListener("DOMContentLoaded",function(event) {
// GAS
document.getElementById('GAS').oninput = function() {
this.onkeydown = null;
calculate.call(this);
};
document.getElementById('GAS').onkeydown = function() {
calculate.call(this);
};
// SMAL
document.getElementById('SMAL').oninput = function() {
this.onkeydown = null;
calculate.call(this);
};
document.getElementById('SMAL').onkeydown = function() {
calculate.call(this);
};
// CV
document.getElementById('CV').oninput = function() {
this.onkeydown = null;
calculate.call(this);
};
document.getElementById('CV').onkeydown = function() {
calculate.call(this);
};
calculate = function (){
//console.log("calcing...");
var GAS = document.getElementById('GAS').value;
var SMAL = document.getElementById('SMAL').value;
var CV = document.getElementById('CV').value;
var GAScal = (GAS * 6);
var SMALcal = (SMAL * 0.5);
var CVcal = (CV);
var total_score = CVcal + GAScal + SMALcal;
if(total_score)
{
//total_score = 10.620000000000001
//total_score = 10.625000000000001
document.getElementById('total_score').innerHTML = "Total score = "+ roundNumber(total_score,2);
}
//console.log(total_score);
//console.log("calcing done");
}
// this rounds your number,and scale is to what precision we round to and return
function roundNumber(num,scale) {
if(!("" + num).includes("e")) {
return +(Math.round(num + "e+" + scale) + "e-" + scale);
} else {
var arr = ("" + num).split("e");
var sig = ""
if(+arr[1] + scale > 0) {
sig = "+";
}
return +(Math.round(+arr[0] + "e" + sig + (+arr[1] + scale)) + "e-" + scale);
}
}
})
</script>
</head>
<body dir="rtl">
<p>GAS
<br>
<input id="GAS" type="number" min="0" max="5" step="" oninput="calculate">
</p>
<p>SMAL
<br>
<input id="SMAL" type="number" min="0" max="100" value="1" oninput="calculate">
</p>
<p>CV
<br>
<input id="CV" type="number" min="1" max="20" value="1" oninput="calculate">
</p>
<h2 id="total_score"></h2>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。