嗨，有人能正确运行这段代码吗？我学会了做类似的东西https://www.youtube.com/watch?v=vkBiEuZSq9s但这不是贷款，只是一个简单的计算SMAL应为*0.5气体*6CV作为
结果应该是SMAL+GAS+CV
我是JavaScript新手，我需要你的帮助
Thanx
<!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>