How to calculate using input from div input tags

Question

I'm lost working on a computer science assignment and my teacher isn't available to help. I have a simple JS program that's supposed to subtract values from user input.

Here is my code:

document.getElementById("calculateButton").addEventListener("click", calculate);

function calculate(){
        var exspendin = document.getElementById('exspendin');
        var avfundin = document.getElementById('avfundin');
        var total = 'exspendin' - 'avfundin';
        //var total = math.subtract('avfundin', 'exspendin')
        document.getElementById('calc');
        window.alert('total');
}

<div><input type="text" id="avfundin" height="79" width="328" y="153.5" x="235.99999"  value="Input Available Funds"><div>
<div><input type="text" id="exspendin" height="79" width="328" y="292.5" x="235.99999" value="Input Expected Spending"><div>
<a id="calculateButton">Calculate</a>

When I run, it prints "total" instead of the difference of the user input.

How would I get it to do that?

Because you should window.alert(total) without ', but still, I never saw x and y in an input text — matiaslauriti
– matiaslauriti, Commented Mar 20, 2021 at 2:48
var total = 'exspendin' - 'avfundin' should be var total = +exspendin- +avfundin — user6386114
– user6386114, Commented Mar 20, 2021 at 3:26
If one of the answers on this page solved your problem please consider marking it as accepted. Thanks! — Ivan86
– Ivan86, Commented Mar 21, 2021 at 10:58

Nguyễn Văn Phong · Accepted Answer · 2021-03-20 03:27:28Z

1

There are some of the following problems:

HTML

Using placeholder="Input Available Funds" instead of value="Input Available Funds"

Javascript

using window.alert(total); instead of window.alert('total');
Using document.getElementById('exspendin').value to get value instead of an element.
Using Number(exspendin) to convert from string to number.
Using var total = Number(exspendin) - Number(avfundin); instead of var total = 'exspendin' - 'avfundin'

document.getElementById("calculateButton").addEventListener("click", calculate);

function calculate(){
    var exspendin = document.getElementById('exspendin').value;
    var avfundin = document.getElementById('avfundin').value;
    var total = Number(exspendin) - Number(avfundin);
    window.alert(total);
}

<div>
  <input type="text" id="avfundin" height="79" width="328" y="153.5" x="235.99999"  placeholder="Input Available Funds">
<div>
<div>
  <input type="text" id="exspendin" height="79" width="328" y="292.5" x="235.99999" placeholder='Input Expected Spending'>
<div>

<a id="calculateButton">Calculate</a>

placeholder: Specifies a short hint (one word or a short phrase) that describes the expected value of the text field

edited Mar 20, 2021 at 3:27

answered Mar 20, 2021 at 3:07

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

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

1 Comment

Nguyễn Văn Phong Over a year ago

@Avery Does this answer your question? Let me know if you need any help ^^!

user15296247 · Accepted Answer · 2021-03-20 03:44:38Z

You need to use the value variable (to get the value of the numbers), and then use the Number function (to change the string to a number). Then just alert the subtracted pair.

document.getElementById("calculateButton").addEventListener("click", calculate);

function calculate(){
        var exspendin = Number(document.getElementById('exspendin').value); //get the number value of the first input
        var avfundin = Number(document.getElementById('avfundin').value); //get the number value of the second input
        var total = exspendin - avfundin; //subtract the two
        window.alert(total); //alert the total
}

<div><input type="text" id="avfundin" height="79" width="328" y="153.5" x="235.99999"  aria-label="Input Available Funds"><div>
<div><input type="text" id="exspendin" height="79" width="328" y="292.5" x="235.99999" aria-label="Input Expected Spending"><div>
<a id="calculateButton">Calculate</a>

Ivan86 · Accepted Answer · 2021-03-20 05:47:12Z

You can do it like this:

function calculate(){
    // you must get the value of the input element
    // trim() removes extra whitespace
    var exspendin = document.getElementById('exspendin').value.trim();
    var avfundin = document.getElementById('avfundin').value.trim();
    
    if(exspendin.length == 0 || avfundin.lenth == 0) {
        alert("Fields must not be empty");
        return;  // exit from the function so no more code gets executed
    }
    
    // convert string to integer
    exspendin = parseInt(exspendin);
    avfundin = parseInt(avfundin);
    
    // parseInt() returns NaN if the input could not be converted to integer
    // isNaN() checks if it's Not A Number
    if(isNaN(exspendin) || isNaN(avfundin)) {
        alert("Both fields must have an integer value");
        return;
    }
    
    // If the code got to here then both inputs are non empty integers
    var total = exspendin - avfundin;
    
    // write to div and alert
    document.getElementById('calc').innerHTML = "The total is: " + total;
    window.alert("The total is: " + total);
}

<div><input type="text" id="avfundin" height="79" width="328" y="153.5" x="235.99999"  placeholder="Input Available Funds" value=""><div>
<div><input type="text" id="exspendin" height="79" width="328" y="292.5" x="235.99999" placeholder="Input Expected Spending" value=""><div>

<input type="button" value="Calculate" onclick="calculate()" />

<div id="calc"></div>

Collectives™ on Stack Overflow

How to calculate using input from div input tags

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related