javascriptで ボタンを押すと数値が ±1000ずつされていく２つのボタンを追加したいが、+を押した時だけ数字が加算されるのではなく、そのまま文字として追加されてしまう。

Question

前提・実現したいこと

javascriptを用いて、+ボタンを押すと既に入力されている数値に+1000
-ボタンを押すと既に入力されている数値から-1000 したい。

発生している問題・エラーメッセージ

-ボタンをおした際は正常に動作し、例えば10000が入力されていれば9000,8000と下がっていくが、
+を押した際には100001000,1000010001000 と追加されてしまう。

要素検証上のsorce部分にエラーメッセージは無し

該当のソースコード

<tr>
<td>価格　　　： <button id="value_plus">＋</button><input type="number" name="value" id="value" value="1000000" size="10"> 円 <button id="value_minus">－</button>
</td>
</tr>

let valueoutput = document.getElementById("value");

let valueplusButton = document.getElementById("value_plus");

let onClickvaluePlusButton = () => {

    valueoutput.value += 1000;
};
valueplusButton.addEventListener("click", onClickvaluePlusButton);


let valueminusButton = document.getElementById("value_minus");
let onClickvalueMinusButton = () => {

    valueoutput.value -= 1000;
};
valueminusButton.addEventListener("click", onClickvalueMinusButton);

試したこと

+=1000;を-=1000;にしたところ、プラスボタンを押すと数値が-1000された。
+=1000;を ++;にしたところ、プラスボタンを押すたび数値が1ずつ増えた。
housevalueoutput.value += Number('1000');　にするも、変わらず 入力した数値の横に1000が追加されていった。
1000の状態でプラスボタンを押し、10001000になった状態でマイナスボタンを押すと10000000,9999000となった。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[Irohabegginer]

すみません。　更新しました。

Answer 1

入力コントロールの値（valueの値）は「文字列」です。
なので

a = "1000";
a += 1000;
console.log(a);

となります。
「加算した結果を表示したい」のでしたら、「現在値を数値に変換して足した結果を設定する」形になると思います。

a = "1000";
a = parseInt(a) + 1000;
console.log(a);

Comments

[Irohabegginer]

ご回答ありがとうございます。
parseIntを用いることで問題は解決できました！
なぜマイナスボタンは正常に動作をするのでしょうか。

[m.ts10806]

+ は「文字列連携」の役割もありますが
- は「引き算」の役割しか持たないからです。

[Irohabegginer]

完全に理解できました。
ありがとうございます。