input要素に手入力した数値からカウントアップ・ダウンさせたい

実現したいこと

HTMLとJavaScriptでカウントアップ・ダウン処理を作っています。
ボタンを押すとカウントアップ・ダウン処理をする機能に加え、入力フォームに任意の数値を入力し確定ボタンを押すと今ある数値を上書きし、「+1」「-1」を押すと任意の数値からカウントアップ・ダウン処理をしたいのですがなかなか上手く実装ができません…。

進捗としては
ボタンを押すとカウントアップ・ダウンする → 〇
入力フォームに任意の数値を入力し今表示されている数値を上書きする → 〇
上書きした任意の数字から「+1」「-1」する → ✖

また、コーディングでここの部分をこうしたらもっと良くなる等ありましたら是非アドバイスいただけますと幸いです。
「window.onload」とHTMLに「onclick」を追加する書き方が混在しているので、できれば多少記述量が多くても個人的に理解がしやすい「window.onload」に統一させたいです。その場合はどうコーディングすればいいでしょうか？

発生している問題

例）任意の数値を99とする→確定ボタンを押す
「+1」「-1」を押すと下記のような結果に…
→文字列の足し算・引き算になってしまう

現在のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8" />
5	<title>カウントアップ・ダウン</title>
6</head>
7<body>
8	<div id="now_num">0</div>
9	<input type="text" value="0" id="total" />
10	<input type="button" onclick="func1()" value="確定" id="confirm" /> <br />
11	<input type="button" value="+1" id="one_up" />
12	<input type="button" value="-1" id="one_down" />
13
14<script src="script.js"></script>
15</body>
16</html>

JavaScript
1window.onload = function(){
2	var total = document.getElementById("total");
3	var now_num = document.getElementById("now_num");
4	//増加
5		var one_up_btn = document.getElementById("one_up");
6	//減少
7		var one_down_btn = document.getElementById("one_down");
8	//定義
9		var count_num = 0;
10
11	//カウントアップ処理
12		one_up.onclick = function(){
13		count_num += 1;
14		total.value = count_num;
15		now_num.innerHTML = count_num;
16		}
17	//カウントダウン処理
18		one_down.onclick = function(){
19			count_num += -1;
20			total.value = count_num;
21			now_num.innerHTML = count_num;
22		}
23}
24	function func1() {
25		var input_num = document.getElementById("total").value;
26		document.getElementById("now_num").innerHTML = input_num;
27		one_up.onclick = function(){
28			input_num += 1;
29			total.value = input_num;
30			now_num.innerHTML = input_num;
31		}
32		one_down.onclick = function(){
33			input_num += -1;
34			total.value = input_num;
35			now_num.innerHTML = input_num
36		}
37	}
38
39

行動規範の内容に同意します

回答2件

ベストアンサー

<input>で代入した値はstring型として帰ってくるので、int型にキャストしないと1を文字として足し引きすることになります。

JavaScript
1function func1() {
2    var input_num = document.getElementById("total").value;
3    var int_input_num = parseInt(input_num, 10); /* int型にキャスト */
4    document.getElementById("now_num").innerHTML = int_input_num;
5    /* 以下キャストした変数に１を足し引きする */
6    one_up.onclick = function(){
7        int_input_num += 1;
8        total.value = int_input_num;
9        now_num.innerHTML = int_input_num;
10    }
11    one_down.onclick = function(){
12        int_input_num += -1;
13        total.value = int_input_num;
14        now_num.innerHTML = int_input_num
15    }
16}

投稿2020/03/16 08:48

soliste16

総合スコア757

itzuakniami123

2020/03/16 09:23 編集

soliste16様ご回答ありがとうございます！やはりそういうことでしたか…。特にPythonはstring型とint型を意識してプログラミングする必要がある認識でした。Python同様、JavaScriptも意識しないと上手くいかないんですね…。ご指摘通りparseInt()でint型にキャストすると無事に処理が上手くいきました！ JavaScriptはまだ勉強中で、この処理ができず、ずっと唸っていたので本当に助かりました！分かりやすくコードも表示していただいたので、ベストアンサーとさせていただきます！

行動規範の内容に同意します

こんにちは。コードを書いていたらベストアンサー決まっちゃいましたが、供養として提出致します。私だったらこうする、というコードです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8" />
5    <title>カウントアップ・ダウン</title>
6</head>
7<body>
8    <div id="display_num">0</div>
9    <input type="number" value="0" id="num_field">
10    <button id="confirm">確定</button><br/>
11    <button id="one_up" >+1</button>
12    <button id="one_down">-1</button>
13</body>
14
15<script>
16let now_num
17window.onload = function(){
18    now_num = Number(document.getElementById("num_field").value)
19    const one_up_btn = document.getElementById("one_up")
20    const one_down_btn = document.getElementById("one_down")
21    const input_num_field = document.getElementById("num_field")
22    one_up_btn.onclick      = function(){addNum(1)}
23    one_down_btn.onclick    = function(){addNum(-1)}
24    input_num_field.onkeyup = function(){changeNum(this.value)}
25    displayNumChange()
26}
27function addNum(num){
28    now_num += Number(num)
29    document.getElementById("num_field").value = now_num
30    displayNumChange()
31}
32function changeNum(num){
33    if(num === '') return;
34    now_num = Number(num)
35    displayNumChange()
36}
37function displayNumChange(){
38    document.getElementById("display_num").innerHTML = now_num
39}
40
41</script>
42</html>

ポイントは以下です。

+1も-1もやることは固定値の加算減算なので同じ関数にまとめる

（ちなみにaddNum(1)と書いていますが、元々のHTMLエレメントでvalue="1"と書いてaddNum(this.value)と書いてもいいです。
更に言うならHTMLエレメント側に直接onclick="addNum(1)"と書いた方がシンプルですが今回はonloadでやるということだったので割愛）

処理ごとに値を取得しなおすより、値をグローバル変数で持ってた方がいいです。
varでの宣言は古いです。可能な限りconstで宣言し、値を変更する必要がある場合のみletを使いましょう。古いブラウザの対応をするとかじゃない限りvarはいらないです……。

あと、HTML側もいくらか変更を加えています。

input type="button"は使わない。→CSSが効きづらく、valueを別途指定できないので。正直type="button"は古いです……（今回はあんまり関係ないです）
input type="text"ではなくinput type="number"の方がブラウザが勝手にバリデーション効かせてくれていい感じです（限界はありますが、Stringが容赦無く入ってくるtextよりマシです）
［確定］ボタンでinputの中身を取るよりはonkeyupで都度取得した方がユーザビリティ的に良いです。そのため［確定］ボタンは上記コードでは機能しません。

投稿2020/03/16 10:15

編集2020/03/16 10:18

tsurugi

総合スコア89

itzuakniami123

2020/03/16 10:30 編集

tsurugi様回答ありがとうございます！入力フォームに入れるのは数値のみなので、<input type="text" value="0" id="total" />ではなく<input type="number" value="0" id="total" />でもいいかなとは思ったのですが、入力フォーム内右横に表示される上下ボタンを表示させたくなかった為泣く泣く「type="text"」に戻しました。「type="number"」にした際に表示される上下ボタンを非表示にする方法はありますでしょうか？

tsurugi

2020/03/16 10:42 編集

CSSで指定するのが一番早いかな〜と。 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance:textfield; } CSSを効かせるのが面倒で、とりあえずエラーに対応できればいいか〜程度なら type="text" にして function changeNum(num){ if(num === '') return; num = num.replace(/[^\d]/g,'') now_num = Number(num) displayNumChange() } って感じで受け取った値の数値以外を削除するのが手っ取り早いかと。

itzuakniami123

2020/03/16 10:52

tsurugi様早速のご返答ありがとうございます！ CSSで指定して削除するということですね。参考にさせていただきます！上記の質問は簡潔にするためにあえてHTMLとJavaScriptのみ記載していますが、実際はCSSで肉付けしているので、tsurugi様の＞＞ input type="button"は使わない。→CSSが効きづらく、valueを別途指定できないので。正直type="button"は古いです……（今回はあんまり関係ないです）こちらのアドバイスは大変勉強になりました。「 input type="button"」と「<button></button>」違いについても早速Webで調べてみましたが、納得することができました。また、＞＞ varでの宣言は古いです。可能な限りconstで宣言し、値を変更する必要がある場合のみletを使いましょう。古いブラウザの対応をするとかじゃない限りvarはいらないです……。ということでしたが、こちらも早速自分のプログラムに取り入れたいと思います。有益な情報、誠にありがとうございました！

行動規範の内容に同意します

あなたの回答