CODEWITHSUNDEEP
javascriptforms
Bakangjr
Bakangjr

Reputation: 1

Accepting user input using a form and perform calculations & display it using javascript

I am trying to use an html form to accept my user input then do the calculations on javascript, it just displays the dialogue box without the calculations, what could be the problem? I don't know how to go about it, this is what I tried so far.

Javascript

<script type="text/javascript">
function Air() {
    input = document.getElementById('Enter').value;
    TotalPurchasingAmountOrange = 0.87 * input;
    discountOrange = 0.13 * input;
    TotalPurchasingAmountMascom = 0.85 * input;
    discountMascom = 0.15 * input;
    TotalPurchasingAmountBMobile = 0.83 * input;
    discountMascom = 0.17 * input;
    alert("Orange airtime:\nAmount: " + TotalPurchasingAmountOrange + "\nDiscount: " + discountOrange);
    alert("Mascom airtime:\nAmount: " + TotalPurchasingAmountMascom + "\nDiscount: " + discountMascom + "\nBMobile airtime:\nAmount: " + TotalPurchasingAmountBMobile + "\nDiscount: " + discountBMobile);
}
</script>

Form

<ul>
    <li>
        <label>Units
            <input type="text" data-bind="value: units" />
        </label>
    </li>
</ul>
<div class="buttonArea">
    <input id="Enter" type="button" value="Enter" onclick="Air()" />
</div>

Upvotes: 0

Views: 494

Answers (3)

user1637579
user1637579

Reputation:

Your problem is here:

input = document.getElementById('Enter').value;
...
<input id="Enter" type="button" value="Enter" onclick="Air()"/>

Enter has a value of "Enter", so when you try to multiply that by 0.87, I suspect that you're either getting a console error or javascript is trying to be smart and figure out the value and is getting it completely wrong.

This is what you want:

<input type="text" id="Enter">
<input type="button" value="Enter" onclick="Air()"/>

Upvotes: 1

SolarBear
SolarBear

Reputation: 4629

You get the value of Enter in your Javascript. If you perform an alert(input) after you've assigned the variable, you'll notice its value is Enter, the text on the button. Not what you're trying to do, I guess!

Add to your HTML, for instance :

<input id="number" type="textbox">

And change your first Javasvript line :

input = document.getElementById('number').value;

Input a value into the textbox and you should notice actual numbers showing up in your last two alert calls!

Upvotes: 0

Vladislav Qulin
Vladislav Qulin

Reputation: 1932

input = document.getElementById('Enter').value;

First of all, please, use "var" before initializing variables, unless "input" is global variable. Second, according to your code, input value will be "Enter". And right after that you try to multiply it by some numbers. Even JS cannot provide this kind of calculations.

You need to use

<input type="text" id="Enter" />

to allow users to write their own values.

or you can use dialog window via prompt function. It will look like:

function Air (){
    while (isNaN(amount)) {
        var input = prompt("Please, enter needed amount. Notice, that it should be number");
        var amount = parseFloat(input);
    }

    var TotalPurchasingAmountOrange = 0.87 * amount;
    var discountOrange = 0.13 * amount;

    var TotalPurchasingAmountMascom = 0.85 * amount;
    var discountMascom = 0.15 * amount;

    var TotalPurchasingAmountBMobile = 0.83 * amount;
    var discountMascom = 0.17 * amount;

    alert("Orange airtime:\nAmount: " +TotalPurchasingAmountOrange+ "\nDiscount: " +discountOrange );

    alert("Mascom airtime:\nAmount: " +TotalPurchasingAmountMascom+ "\nDiscount: " +discountMascom+ "\nBMobile airtime:\nAmount: " +TotalPurchasingAmountBMobile+ "\nDiscount: " +discountBMobile  );
}

Upvotes: 0

Related Questions