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

Question

Hi could anyone run this code correctly? I learnt to make somthing similar to this https://www.youtube.com/watch?v=vkBiEuZSq9s but this is not a loan, it is a simple calculation SMAL should be * 0.5 GAS * 6 CV as it is

result should be SMAL + GAS + CV

I am new to JavaScript and I need your help

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>

Welcome to the world of JS. Your new best friends will be the developer tools of your browser. By the looks of your code there should be a couple of errors in the console. Check them out. — Emiel Zuurbier, Oct 21 '20 at 08:34

EspressoBeans · Accepted Answer · 2020-10-23T14:45:38.493

A couple things.

You have errors in your JavaScript. Like another person said, get familiar with your browser development tools, and using console.log() and/or alert().
You've stumbled upon an age-old issue with oninput event for Input elements. It's buggy, and depends on browser and browser version.

Anyway, without getting into too much detail (which I'm sure you can search the web for answers to), I've included a working version of your html page here. My JavaScript logic here is a poor man's version so that you can see what I did to capture the oninput events.

<!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>

I have one question, how to change the total result number to two decimal number? Sometimes I get 10.620000000000001, I need it like this 10.62. — i8a6ari, Oct 23 '20 at 13:57
You've stumbled upon yet another "not so straight forward" request. See this: https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary. The rub is that for a simple solution you would need to use .toFixed(2), but that always sets decimal point to 2 and doesn't round. You can also use Math.round() but it won't give option of using decimals if needed. But to help you out, I'll update the snippet to give you a basic solution and maybe you'll be able to work out the rest. — EspressoBeans, Oct 23 '20 at 14:35

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

1 Answers1