How can I add HTML values via JavaScript and output the result?

Question

I have some simple multiplication and addition that I'm performing via JavaScript and outputting the result into an HTML Element on a webpage. For some reason the output seems to be a combonation of two values rather that a SUM value. I've attached a screenshot of my results.

function ccFeeCalculation(){
  var payment = document.getElementById('payment_amount').value;
  var fee = .03 ;
  var feeAmount = (payment * fee)*1.00;
  var paymentPlusFee = payment + feeAmount;
  console.log("fee amount:" + paymentPlusFee);

  document.getElementById("processingFee").textContent = feeAmount; 
  document.getElementById("processedAmount").textContent = paymentPlusFee;
}

<h2><label>Step1: Payment Amount:</label>
<input  class="currencyTextBox" type="text" name="payment_amount" id="payment_amount" size="6" onKeyUp="ccFeeCalculation();" /></h3>
This amount can be changed in order to make a partial payment.<br /><br />

<div id="ccFee" style="display: none">
  <font color="red"><span id="feePercentage">A 3% Fee Will Be Applied:</span> &nbsp; <span id="processingFee" class="currencyTextBox"></span><br>

      Amount to be processed today: &nbsp; <span id="processedAmount" class="currencyTextBox"></span><br><br>
  </font>
</div>

If my payment amount is typed as 10.00, it shows the correct fee amount of .30 but when it added the two values, the result is 10.000.3

I'm sure I'm missing something silly. Can someone shed some light?

the value from the input is a string, not a number. you can't do math on a string, and so it concats instead of sums. — devlin carnate, Jun 25 '21 at 18:53
`var payment = Number(document.getElementById('payment_amount').value);` — Kinglish, Jun 25 '21 at 18:56
Yes, 100%. I was just reading that when you posted that comment. If I add + in front of the variables then the math works correctly. I also just found this to set it to 2 decimal places: (Math.round(paymentPlusFee * 100) / 100).toFixed(2); — Brian Fleishman, Jun 25 '21 at 18:57

score 0 · Answer 1 · answered Jun 25 '21 at 18:59

0

It concats the value as the . value returns a string there is a trick to convert string to number just add + sign before variable name and it will get converted to a number.

Do something like this

let payment = +document.getElementById('payment_amount').value;

answered Jun 25 '21 at 18:59

Uzair Saiyed

575
1
6
16

nice hack I didn't knew about it ! – Sanmeet Jun 25 '21 at 19:16

Sanmeet · Answer 2 · 2021-06-25T19:15:44.917

A little bit of improved markup .. I think when you are going to sum up the final then sum it after the form is ready to submit with all validations not when the person is just vaguely writing any values inside the input ! .. Also corrected the js..

The problem was simple you needed to extract the interger value from the input so use parseInt(Val) method ( or parseFloat ) .

Check it out =>

HTML

<form id="form" action="" method="get" accept-charset="utf-8">
  <label for="payment_amount">
    <h2>  Step1: Payment Amount:</h2>
  </label>
  <input class="currencyTextBox" type="text" name="payment_amount" id="payment_amount" size="6" />
  <button>Submit</button>
</form>

<p>
  This amount can be changed in order to make a partial payment.
</p>
<br /><br />

<div id="ccFee" style="display: none">
  <font color="red"><span id="feePercentage">A 3% Fee Will Be Applied:</span> &nbsp; <span id="processingFee" class="currencyTextBox"></span><br>

    Amount to be processed today: &nbsp; <span id="processedAmount" class="currencyTextBox"></span><br><br>
  </font>
</div>

JS

  const form = document.querySelector('#form');

  form.onsubmit = function (e) {
    e.preventDefault();
    let payment = document.getElementById('payment_amount').value;
    payment = parseInt(payment) // parseFloat incase float value
    const fee = 0.03;

    const feeAmount = (payment * fee) * 1.00;

    const paymentPlusFee = payment + feeAmount;

    console.log("fee amount:" + paymentPlusFee);

    document.getElementById("processingFee").textContent = feeAmount;
    document.getElementById("processedAmount").textContent = paymentPlusFee;
  }

score 0 · Answer 3 · answered Jun 25 '21 at 19:10

Parse the value using parseInt():

function ccFeeCalculation() {
  var payment = parseInt(document.getElementById('payment_amount').value);
  var fee = .03;
  var feeAmount = (payment * fee) * 1.00;
  var paymentPlusFee = payment + feeAmount;
  console.log("fee amount:" + paymentPlusFee);

  document.getElementById("processingFee").textContent = feeAmount;
  document.getElementById("processedAmount").textContent = paymentPlusFee;
}

<h2>
  <label>Step1: Payment Amount:</label>
  <input class="currencyTextBox" type="text" name="payment_amount" id="payment_amount" size="6" onKeyUp="ccFeeCalculation();" /></h3>
  This amount can be changed in order to make a partial payment.<br /><br />
  <div id="ccFee">
    <font color="red"><span id="feePercentage">A 3% Fee Will Be Applied:</span> &nbsp; <span id="processingFee" class="currencyTextBox"></span><br> Amount to be processed today: &nbsp; <span id="processedAmount" class="currencyTextBox"></span><br><br>
    </font>
  </div>

How can I add HTML values via JavaScript and output the result?

3 Answers3