HTML & CSS How do i make a math form?

[joshii1]

Hello y'all! im currently trying to make a form with two inputs where you would enter in a certain number in each box then press submit then once submitted it would divide those two numbers together, for example Box #1: 100 Box #2: 50 Submit? then once submitted, it would divide those two boxes by each other. and display the answer. can you guys help me out? i dont know where to start or what to do to make it work. thanks! <3

 

[BGB]

Draw the layout to understand.

 

[joshii1]

Ok, give me a little bit to do so!

Draw the layout to understand.

 

[joshii1]

Well, heres a rough concept of what i am trying to make: so, once you would press submit, it would divide box 1 by box 2 then give you the answer.


Once submitted:

 

[BGB]

You can start from here -

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Devide</title>
    
    <style>
        main {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        main p {
            margin: 10px;
        }
        #submit {
            margin: 10px;
            padding: 5px 10px;
            border: none;
            background-color: #47FF00;
        }
        #submit:hover {
            cursor: pointer;
            background-color: #339C0A;
        }
    </style>
</head>

<body>
    <main>
        <p>Enter Number #1: </p><input type="text" id="b1" />
        <p>Enter Number #2: </p><input type="text" id="b2" />
        <input type="submit" id="submit" value="Submit" onclick="myFunction()" />
    </main>
    
    <script>
        function myFunction() {
            var b1 = document.getElementById("b1").value;
            var b2 = document.getElementById("b2").value;
            
            var result = b1 / b2;
            alert("Result: " + result);
        }
    </script>

</body>

</html>

 

[joshii1]

Thank you so much for your help! <3

 

[joshii1]

Hey BGB may i ask, how do i make it work with bigger numbers and decimals? I tried doing 1,000,000 and 38.71 and the result i got was NaN

 

[BGB]

I got this -

 

[joshii1]

whenever i paste the needed numbers like for example 100,000 and 38.71 for example, it would give me NaN, is there a way to have it remove the commas automatically?

 

[BGB]

Change this -

<script>
     function myFunction() {
         var b1 = document.getElementById("b1").value.replace(/,/g, '');
         var b2 = document.getElementById("b2").value;
            
         var result = b1 / b2;
         alert("Result: " + result);
         console.log(b1);
     }
</script>

 

[joshii1]

Ok, thanks so much for your help! <3

 

[BGB]

Welcome 🙂