2

I'm getting two value from input type number but result not showing well

const price = document.querySelector(".price").value;
const items = document.querySelector(".items").value;
const a = price + items;
const subtotal = document.querySelector(".total");
subtotal.addEventListener('click', function(){
    console.log(a);
});
Mamun
  • 66,969
  • 9
  • 47
  • 59
Muhammad Waqas
  • 41
  • 5
  • 1
    `const a = Number(price) + Number(items);` – Mamun Jul 15 '19 at 14:09
  • What does the html look like, and what numbers are you inputting? Also, what is the final logged output? – n8jadams Jul 15 '19 at 14:09
  • 1
    You know you are reading the values when page loads, not when it is clicked. The code above the click does not magically update. – epascarello Jul 15 '19 at 14:10
  • This should be easy to put into a runnable snippet to demonstrate the problem. Would you be willing to do that? – Wyck Jul 15 '19 at 14:11
  • _"but result not showing well"_ Please elaborate on the problem and show us any errors you're getting – j08691 Jul 15 '19 at 14:12
  • Possible duplicate of [javascript (+) sign concatenates instead of giving sum?](https://stackoverflow.com/questions/45840501/javascript-sign-concatenates-instead-of-giving-sum) – adiga Jul 15 '19 at 14:23

3 Answers3

2

The reason you get a dodgy output is because of 2 reasons:

  1. You get the values once and only once, so updated values will be incorrect when you call the function.

  2. You are concatenating strings together, rather than adding strings. E.g: '5' + '2' = '52'

You should get the values inside the function, because they may change, and you should convert the values to numbers before adding them. You should also use ID's - not classes - for specific elements:

const subtotal = document.getElementById("total")

subtotal.addEventListener('click', function() {
  const price = +document.getElementById("price").value,
    items = +document.getElementById("items").value,
    a = price + items
  console.log(a)
});
<input type="number" id="price" value=5>
<input type="number" id="items" value=2>
<button id="total">Add</button>

You can write this function better like so:

const subtotal = document.getElementById("total")

subtotal.addEventListener('click', () => console.log(['price', 'items']
  .reduce((a, id) => a + +document.getElementById(id).value, 0)
))
<input type="number" id="price" value=5>
<input type="number" id="items" value=2>
<button id="total">Add</button>

With this approach, you can just add an ID to the list to add that element too.

Kobe
  • 6,226
  • 1
  • 14
  • 35
  • `querySelector()` will return the first matched element, there is nothing wrong with `document.querySelector(".price").value` – Mamun Jul 15 '19 at 14:21
  • @Mamun yes, you're right, I forgot about that, but it is better practice to use ID's – Kobe Jul 15 '19 at 14:22
1

Though the type of the control is number, the actual input is of type string. Hence string concatenation (i.e, '2' + '3' = '23') is happening. You have to convert the values to number before performing the addition. To get the current value from the controls you also have to access the values inside the function:

const subtotal = document.querySelector(".total");

subtotal.addEventListener('click', function(){
  const price = document.querySelector(".price").value;
  const items = document.querySelector(".items").value;
  console.log(typeof price); // string
  const a = Number(price) + Number(items);
  console.log(a);
});
<input type="number" class="price"/>
<input type="number" class="items"/>
<button type="button" class="total">Total</button>
Mamun
  • 66,969
  • 9
  • 47
  • 59
-2

You must do all that logic inside the event listener so that you can read input values even if they changed and calculate result based on current input values.

It's also good to declare a function for sum so you can reuse it wherever you need it.

function sum(a,b) {
    return Number(a) + Number(b);
}

const btn = document.querySelector(".btn");

btn.addEventListener('click', function(){

    const price = document.querySelector(".price").value;
    const items = document.querySelector(".items").value;

    document.querySelector(".total").innerText = sum(price, items);
});
<input type="text" class="price">
<input type="text" class="items">
<button class="btn">SUM</button>
<div class="total"></div>
Têco
  • 42
  • 7
  • 1
    Your code doesn't work as it should. Also, I see no need to have a sum function. It takes more characters to write `sum(4, 3)`, than it does to write `4 + 3`. – Kobe Jul 15 '19 at 14:23
  • Thanks @Kobe there was a bug. About the function, I was not trying to solve the problem using the minimum amount of characters as possible but making it the best as possible. – Têco Jul 16 '19 at 15:58
  • How is using a sum function any better than writing it out normally? – Kobe Jul 16 '19 at 16:35
  • I already said in my answer, a function can be reused later in the code. I'm thinking about an wider scenary than the one displayed in the question which would be probably the case. – Têco Jul 16 '19 at 17:24