document.querySelector возвращает строку вместо числа

Question

у меня есть два поля типа ввода, и я хочу взять сумму

это мой html: ...

<input type="text" id="pos" autocomplete='off' placeholder="pos"></br>
<input type="text" id="cash" autocomplete='off' placeholder="cash"></br>
<button id="button">submit</button>

...

и мой js:

document.querySelector('#button').addEventListener('click',()=>sum());
function sum() {
    var p=document.querySelector('#pos').value;
    var c= document.querySelector('#cash').value;
    let sum=p+c;
    console.log(sum);
}

, если я вставлю р = 100 и с = 200, я получу сумму = 100200 инсталяций 300

Answer 1

Html: вместо текста и функции parseInt следует ввести тип = число вместо js

<input type="number" id="pos" autocomplete='off' placeholder="pos"></br>
<input type="number" id="cash" autocomplete='off' placeholder="cash"></br>
<button id="button">submit</button>

js:

document.querySelector('#button').addEventListener('click',()=>sum());
function sum() {
    var p= parseInt(document.querySelector('#pos').value);
    var c= parseInt(document.querySelector('#cash').value);
    let sum=p+c;
    console.log(sum);
}