CODEWITHSUNDEEP
javascripthtml
Avery
Avery

Reputation: 21

How to calculate using input from div input tags

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?

Upvotes: 2

Views: 72

Answers (3)

Ivan86
Ivan86

Reputation: 5708

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>

Upvotes: 0

user15296247
user15296247

Reputation:

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>

Upvotes: 0

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14208

There are some of the following problems:

HTML

Javascript

  1. using window.alert(total); instead of window.alert('total');
  2. Using document.getElementById('exspendin').value to get value instead of an element.
  3. Using Number(exspendin) to convert from string to number.
  4. 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

Upvotes: 1

Related Questions