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

Question

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>

user1637579 · Accepted Answer · 2013-08-21 20:42:29Z

1

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()"/>

answered Aug 21, 2013 at 20:42

user1637579

Sign up to request clarification or add additional context in comments.

Comments

Vladislav Qulin · Accepted Answer · 2013-08-21 20:42:10Z

0

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  );
}

answered Aug 21, 2013 at 20:42

Vladislav Qulin

1,9321 gold badge17 silver badges20 bronze badges

1 Comment

Bakangjr Over a year ago

Its running perfect.Now i am trying to display the output using a jquery dialog, do I write the dialogue method within the javascript method?

SolarBear · Accepted Answer · 2013-08-21 20:42:17Z

0

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!

answered Aug 21, 2013 at 20:42

SolarBear

4,6174 gold badges42 silver badges53 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related