任何人都可以帮我显示这个计算的结果吗？ JavaScript

Question

大家好运行这个代码正确吗？我学会了做类似的东西 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>

Answer 1

几件事。

您的 JavaScript 中有错误。就像另一个人说的，熟悉你的浏览器开发工具，并使用 console.log() and/or alert().
您偶然发现了输入元素的 oninput 事件的 age-old 问题。它有问题，并且取决于浏览器和浏览器版本。

无论如何，无需过多讨论细节（我相信您可以在网上搜索答案），我已经在此处提供了您的 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>

任何人都可以帮我显示这个计算的结果吗？ JavaScript

Can anyone help me to show the result of this calculation? JavaScript

javascript

calculator