前提・実現したいこと
ボタンを押して＋１、－１の処理をしつつ手入力でも修正できるようなプログラムを作成しています。
入力したいものは半角数字のみなので、if文を用いて半角数字以外（ゼロ埋め含む）をはじく（＝何もしない）処理を書いたのですが
上手く反映されず困っています。
なお、現在の得点と手入力修正欄のinput要素はあえてリンクさせています。
参考にしたURL 正規表現を用いて JavaScript で数値チェックを行う方法
実装前のプログラム
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8" />
5 <title>半角数字判定</title>
6 <meta content="width=device-width, initial-scale=1.0" name="viewport">
7 <link rel="stylesheet" href="style.css" />
8</head>
9<body>
10 <div id="score">
11 <div class="flx">
12 <h3>現在の得点</h3>
13 <p id="num">0</p>
14 </div><!-- /.flx -->
15 </div><!-- /#score -->
16
17 <div id="box">
18 <h5>▼点数手入力修正 【半角数字のみ】</h5>
19 <div class="flx">
20 <input type="text" value="0" id="input" />
21 <input type="button" onclick="func1()" value="確定" id="decide"/>
22 </div><!-- /.flx -->
23
24 <div class="flx">
25 <input type="button" id="one_up" onclick="down_up1(this.value)" value="+1"/>
26 <input type="button" id="one_down" onclick="down_up1(this.value)" value="-1"/>
27 </div><!-- /.flx -->
28 </div>
29
30 <script src="script.js"></script>
31</body>
32</html>
CSS
1*{
2 padding:0;
3 margin: 0;
4}
5html{
6 font-size:62.5%;
7 width: 1920px;
8 height: 1080px;
9}
10body{
11 font-size:1.6rem;
12}
13.flx{
14 display: flex;
15 flex-wrap: wrap;
16 margin-top: 17px;
17 margin-bottom:17px;
18}
19#score{
20 width: 230px;
21 height: 50px;
22 margin-left:20px;
23}
24#score h3{
25 margin:auto;
26}
27#num{
28 display:block;
29 width: 75px;
30 height: 50px;
31 font-size:3rem;
32 padding-top: 5px;
33}
34#box{
35 display:block;
36 width: 230px;
37 margin-left: 50px;
38 margin-top: 20px;
39 padding:10px;
40 background-color: #f90;
41}
42#one_up,#one_down{
43 display: block;
44 margin:0 auto;
45 font-size:20px;
46 border-radius:10px;
47 padding:10px;
48 cursor:pointer;
49}
50#decide{
51 margin-left: 10px;
52 padding: .4rem;
53 border-radius: .5rem;
54 cursor:pointer;
55}
JavaScript
1//ボタンを押したら±1する
2function down_up1(num) {
3 target = document.getElementById("input")
4 target2 = document.getElementById("num")
5 target_num = parseInt(target.value)
6 get_num = parseInt(num)
7 new_target_num = target_num + get_num
8 if (new_target_num < 0) {
9 new_target_num = 0
10 }
11 target2.innerHTML = target.value = new_target_num
12}
13//確定ボタンを押したときの動き
14function func1() {
15 let input_num = document.getElementById("input").value;
16 //int型に変換
17 let int_input_num = parseInt(input_num, 10);
18 document.getElementById("num").innerHTML = int_input_num;
19}
試したこと
その1 手入力された値をint型に変換し、その値が半角数字であるなら反映させる
JavaScript
1function func1() {
2 let input_num = document.getElementById("num").value;
3 let int_input_num = parseInt(input_num, 10); /* int型 */
4 if (int_input_num == /^([1-9]\d*|0)$/) {
5 document.getElementById("num").innerHTML = int_input_num;
6 }
7}
その2 str型の時点でふるいにかける
JavaScript
1function func1() {
2 let input_num = document.getElementById("input").value;
3 if (input_num == /^([1-9]\d*|0)$/) {
4 //int型に変換
5 let int_input_num = parseInt(input_num, 10);
6 document.getElementById("num").innerHTML = int_input_num;
7 }
8}
上記のプログラムで起きた現象
例）半角数字4を押しても反映されないが、＋１ボタンを押すと5になる
その1とその2で試してみましたが、同じ結果になっていましました。
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/25 08:40
2020/03/26 01:14
2020/03/26 02:39