-1

I get 4.5.525 when adding in javascript

this is the answer i have to get 4.5 + .525 = 5.025 but instead of this i get 4.5.525

here is my code

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swinburnes Test Of Dc Shunt Motor</title>
    <style>
        body {
            padding: 25px;
            background-color: white;
            color: black;
            font-size: 15px;
            background: var(--primary-color);
            transition: background 2s;
        }

        .dark-mode {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <div style="text-align: center;" class="container col-xs-12 col-md-4">
        <h1 style="font-size: 2em;">Swinburnes Calculator (Motor) <span><button class="btn btn-dark badge badge-dark "
                    style="    margin-left: 101px;
            font-size: 12px;" onclick="myFunction()">Dark mode</button></span> </h1>
        <div class="inpSection">
            <div class="amt">
                <label for="VL">VL</label>
                <input type="number" name="VL" id="VL" placeholder="Enter VL Value In Name Plate"
                    style="margin: 2%; margin-left: 6%;">
            </div>
            <div class="time">
                <label for="IL">IL</label>
                <input type="number" name="IL" id="IL" placeholder="Enter IL Value"
                    style="margin: 2%;margin-left: 7%; ">
            </div>
            <div class="rate">
                <label for="Ish">Ish</label>
                <input type="number" name="Ish" id="Ish" placeholder="Enter Ish Value"
                    style="margin: 2%;margin-left: 5%;">
            </div>
            <div class="rate">
                <label for="Ra">Ra</label>
                <input type="number" name="Ra" id="Ra" placeholder="Enter Ra value" style="margin: 2%;margin-left: 6%;">
            </div>
            <div class="rate">
                <label for="Load">Load</label>
                <input type="number" name="Load" id="Load" placeholder="Enter Load value In Name Plate" style="margin: 2%;">
            </div>
            <div class="rate">
                <label for="noLoad">VL</label>
                <input type="number" name="noLoad" id="noLoad" placeholder="Enter NoLoad VL value" style ="margin:2%; margin-left: 6%">
            </div>
            <div class="button">
                <button class="btn btn-success" onclick="Calculate()" style="margin: 2%;
                text-align: center;
                ;
                margin-top: 5%;">Calculate</button>
            
            <button class= "btn btn-danger"  style="margin: 2%;
                text-align: center;
                ;
                margin-top: 5%;" onclick="refreshPage()">Reset All</button>
            </div>
<script>
function refreshPage(){
window. location. reload();
}
</script>
            <div class="result" style="margin-top: 30px;">
                <h3 id="si"></h3>
                <h3 id="wv"></h3>
                <h3 id="Ip"></h3>
                <h3 id="Wc"></h3>
                <h3 id="toloss"></h3>

                <h3 id="Oppower"></h3>
                <h3 id="Eff"></h3>
            </div>
        </div>
        <hr style="height:1px;border:none;color:#333;background-color:#333;" />
        <p style="    text-align: center;
        margin-top: 30px;">Copyright ©️ 2021 AJB</p>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>
<script>
    function Calculate() {
        let vl = document.getElementById('VL').value;
        let il = document.getElementById('IL').value;
        let ish = document.getElementById('Ish').value;
        let ra = document.getElementById('Ra').value;
        let ld = document.getElementById('Load').value;
        let vlo = document.getElementById('noLoad').value;

        let SI = (vl * ld)

        document.getElementById('si').innerHTML = "O/P : " + SI;
        var Iao = (ld+ish);
console.log(Iao)
var WV = (Math.pow(Iao, 2) * ra)


document.getElementById('wv').innerHTML = "Wv : " + WV;
        let IP = (vl * il)

        document.getElementById('Ip').innerHTML = "No Load I/P Power : " + IP;
        var ip21 = (vl*il)
        var WcIa = (il - ish)
        var WvIa = (Math.pow(WcIa, 2) * ra)
        var Wc = (IP - WvIa)
        document.getElementById('Wc').innerHTML = "Wc : " + Wc;
        var TLoss = (WV + Wc)
        document.getElementById('toloss').innerHTML = " Total Loss : " + TLoss;
        var OP = (SI + TLoss)
        document.getElementById('Oppower').innerHTML = "Input Power : " + OP;
        var ef = (SI / OP) * 100
        document.getElementById('Eff').innerHTML = " η % : " + ef;
    }

</script>
<script>
    function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode");
    }
</script>

</html>

when i add IL = 4.5 and Ish = .525 it gives 4.5.525 in the console what to do ?

but the orginal answer it should show is 5.025

rewrite the code and comment it below so i can understand more clearly

when i write same in the javascript it gives me the correct answer

AJB
  • 17
  • 7
  • 3
    Its very hard to identify the part of the snippet that really matters, but im pretty sure that your variables are strings, so you will have to call `parseFloat` on the variables before adding – leberknecht Oct 22 '21 at 10:35
  • 2
    yep u are just concatinating strings – john Smith Oct 22 '21 at 10:36
  • Where you have `document.getElementById('VL').value` etc. Those are strings - convert them (as suggested by others) to floats first. – Glycerine Oct 22 '21 at 10:38

1 Answers1

2

Try something like this:

var lat = (parseFloat(document.getElementById('VL').dataset.value));

That's how to save in variable 'var' the document.getElementById('VL') values and make them float, so now it won't see it as a string and hopefully it will let you sum them and get the number you need.

DarkIceDust
  • 231
  • 2
  • 14
  • how can we write 4.5 + 0.525,as specifying that way it is a sum can you plz explain or can you plz explain how ```document.getElementById('VL').value``` to convert to float – AJB Oct 22 '21 at 10:42
  • it is NaN its not working – AJB Oct 22 '21 at 10:52
  • 1
    Your first statement, 'When you're writing 4.5 + .525, HTML could take it and see it as a concatenation of characters', is incorrect. `4.5 + .525` is valid JS and will output `5.025` as the figures are recognised as floating point numbers - [Demo](https://jsfiddle.net/coedL7uh/). Adding a leading zero is not going to have any affect on that. The problem is because the OP is attempting to perform addition on strings. – Rory McCrossan Oct 22 '21 at 10:54