Question 245103 in Html Question posted in
Some basic documentation can be found here.

HTML Select on change sum values

I want to sum some values onChange HTML select box. My problem is that when I change selected value the value on "display" does not change.

var Price = document.getElementById("price"),
  PriceSValue = Price.value;

var sum = 0;
var a = PriceSValue;
var b = '1000';
sum = a + b;

document.getElementById('display').innerHTML = sum;
<select id="price" class="form-control" name="two">
  <option value="100">Monthly</option>
  <option value="200">3 month</option>
  <option value="300">6 month</option>
  <option value="400">6 month</option>
</select>

<div id="display"></div>
Tags:

2

Answers


  1. 0

    If you want to add an event listener to the select#price element, you need to either add it via JavaScript (preferred) or inline with the HTML markup.

    Also, you should use integer values instead of strings. If you add a number to a string, it is treated as normal string concatenation.

    Note: Not sure why you have "6 month" twice. Are these computations supposed to be multiplicative rather than additive?

    JavaScript Only

    const initialValue = 1000;
const priceSelect = document.querySelector('#price');
const display = document.querySelector('#display');

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const onPriceChange = (e) => {
  const amount = +e.target.value; // Access value; cast to number '+';
  const total = initialValue + amount;
  display.textContent = currencyFormatter.format(total);
};

priceSelect.addEventListener('change', onPriceChange);

onPriceChange({ target: priceSelect });
    <select id="price" class="form-control" name="two">
  <option value="100">Monthly</option>
  <option value="200">3 month</option>
  <option value="300">6 month</option>
  <option value="400">6 month</option>
</select>
<div id="display"></div>

    HTML + JavaScript

    const initialValue = 1000;
const priceSelect = document.querySelector('#price');
const display = document.querySelector('#display');

const currencyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const onPriceChange = (e) => {
  const amount = +e.target.value; // Access value; cast to number '+';
  const total = initialValue + amount;
  display.textContent = currencyFormatter.format(total);
};

// Added as an attribute to HTML => onChange="onPriceChange(event)
//priceSelect.addEventListener('change', onPriceChange);

onPriceChange({ target: priceSelect });
    <select id="price" class="form-control" name="two" onChange="onPriceChange(event)">
  <option value="100">Monthly</option>
  <option value="200">3 month</option>
  <option value="300">6 month</option>
  <option value="400">6 month</option>
</select>
<div id="display"></div>
    Login or Signup to reply.
  2. 0

    You need to add an onChange="" event, so it will call a function which will sum your values. You can pass the selection value by adding an argument to the function using this.value. Furthermore, you need to convert every number into an int, so it will sum up.

    function sumAndChangeDisplay(price) {
      var b = 1000;
      var sum = parseInt(price) + b;
      document.getElementById('display').innerHTML = sum;
    }
    <select onChange="sumAndChangeDisplay(this.value)" id="price" class="form-control" name="two">
    <option value="100">Monthly</option>
    <option value="200">3 month</option>
    <option value="300">6 month</option>
    <option value="400">6 month</option>
</select>
<div id="display"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search