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);
});
The reason you get a dodgy output is because of 2 reasons:
You get the values once and only once, so updated values will be incorrect when you call the function.
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.
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>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>
sum(4, 3), than it does to write 4 + 3.
const a = Number(price) + Number(items);