Не выполняется арифметическое действие (сложение)

[tp-20]

Всем привет.

Есть простая форма с инпутом. В инпут вводим любое число, а в диве к этому числу должно прибавляться 20 и выводиться сумма, но цифры не складываются, а конкотенируются.
Пример: 3+20 получается 320, а ожидалось 23;
100+20 получается 10020, ожидалось 120.
Как решить вопрос?

<form method="post" name="calcul" onsubmit="calculate(); return false;">
    <input name="summa" id="calc_summa" value="" type="number" max="1000" onchange="calculate();"/>
    <input name="calculate_btn" value="Рассчитать" type="submit">
</form>
                        
<div id="default" style="outline:1px solid red; height: 30px;"></div>
<div id="itog" style="outline:1px solid blue; height: 30px;"></div>

function calculate(){
        var def_input=document.getElementById("calc_summa").value;
        def_input = def_input+20; // здесь не происходит сложение
        document.getElementById('default').innerHTML=def_input;  
        document.getElementById('itog').innerHTML=(def_input+20); 
    }

    calculate();

[ksa]

но цифры не складываются, а конкотенируются.

Все правильно.
Т.к. у тебя не цифры, а строки. К цифрам их еще нужно привести.

У тебя допустимы только целые числа?

[tp-20]

нет, также могут быть и float
а <input type="number"> - не имеет значения?

[ksa]

а <input type="number"> - не имеет значения?

Так ты же в этом убедился лично.

нет, также могут быть и float

Вот тебе пример...

var a='3';
var b='20.5';
alert(+a+(+b));

[ksa]

tp-20, вот еще примеры...
http://bologer.ru/javascript-preobra...roki-v-chislo/
https://qna.habr.com/q/376527

[tp-20]

ksa, спасибо! то, что надо!
parseInt

[laimas]

а <input type="number"> - не имеет значения?

Если получать как valueAsNumber