Why is this happening? Js calculations

Question

So,im trying to build simple calc and i cant get it to work as simple as it may and be and i have no idea. When adding the values the only the salary - rent work after the are getting concatenated example:9000 -100 = 8900 fine but after adding something else im getting 8900 - 100 = 8900100

document.querySelector('.btn').addEventListener('click',calculateTaxes);

// calculateTaxes
function calculateTaxes(e){
//UI vars
const sal   = document.querySelector('#salary');
const sel   = document.querySelector('#selection');
const rent  = document.querySelector('#rent');
const travel  = document.querySelector('#travel');
const groce  = document.querySelector('#groce');
const elSe = document.querySelector('#else');
const btn  = document.querySelector('#btn');
let final;

final = sal.value - (rent.value+travel.value+groce.value+elSe.value)

}

Answer 1

You may have the input textbox as text so if that is so you need to parse the input value to integers before calculation. Something like this:

// calculateTaxes
function calculateTaxes(e){
 //UI vars
 const sal   = document.querySelector('#salary');
 const sel   = document.querySelector('#selection');
 const rent  = document.querySelector('#rent');
 const travel  = document.querySelector('#travel');
 const groce  = document.querySelector('#groce');
 const elSe = document.querySelector('#else');
 const btn  = document.querySelector('#btn');
 let final;

 final = parseInt(sal.value) - (parseInt(rent.value) + parseInt(travel.value) + parseInt(groce.value) + parseInt(elSe.value));
}