数字入力で次のフォーカスへ、でもコードが長い。

###前提・実現したいこと
数字を１桁入力したらフォーカスが移動し、選択状態になってくれれば良いのですが、
御覧の通り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>４つの数字入力をどうぞ</div>
9    <input type="number" id="kai1" min="0" max="9" value="0" autofocus />
10    <input type="number" id="kai2" min="0" max="9" value="0" />
11    <input type="number" id="kai3" min="0" max="9" value="0" />
12    <input type="number" id="kai4" min="0" max="9" value="0" />
13    <input type="button" id="kaiket" value="決定" /><br />
14  <div id="hyouji">表示</div>
15
16    <script src="main.js"></script>
17</body>
18</html>

JavaScript
1{
2  'use strict';
3document.addEventListener('DOMContentLoaded',function(){
4  let kai1 = document.getElementById('kai1');
5  let kai2 = document.getElementById('kai2');
6  let kai3 = document.getElementById('kai3');
7  let kai4 = document.getElementById('kai4');
8  let kaiket = document.getElementById('kaiket');
9  let hyouji = document.getElementById('hyouji');
10
11kai1.addEventListener('focus',function(){
12  kai1.select();})
13kai2.addEventListener('focus',function(){
14  kai2.select();})
15kai3.addEventListener('focus',function(){
16  kai3.select();})
17kai4.addEventListener('focus',function(){
18  kai4.select();})
19
20kai1.addEventListener('keyup',function(evt){
21    let kc = evt.keyCode;
22    if (kc>=96 && kc<=105){  //テンキーの0～9が押されたら、適当な処理をしつつ
23      hyouji.textContent = "キーコード："+kc+"が押されました";
24      kai2.focus();}  //次のinputへフォーカスを移す
25})
26kai2.addEventListener('keyup',function(evt){
27    let kc = evt.keyCode;
28    if (kc>=96 && kc<=105){  //テンキーの0～9が押されたら以下同文
29      hyouji.textContent = "キーコード："+kc+"が押されました";
30      kai3.focus();}
31})
32kai3.addEventListener('keyup',function(evt){
33    let kc = evt.keyCode;
34    if (kc>=96 && kc<=105){  //テンキーの0～9が押されたら以下同文
35      hyouji.textContent = "キーコード："+kc+"が押されました";
36      kai4.focus();}
37})
38kai4.addEventListener('keyup',function(evt){
39    let kc = evt.keyCode;
40    if (kc>=96 && kc<=105){  //テンキーの0～9が押されたら以下同文
41      hyouji.textContent = "キーコード："+kc+"が押されました";
42      kaiket.focus();}
43})
44kaiket.addEventListener('click',function(){  //決定ボタンでひとまず終了
45  hyouji.textContent = "お終い";}
46)
47},false);
48}
49

###試したこと
name属性やclass属性を追加すれば良いのかなぁ・・
配列みたいな考え方で書く方法があるのかなぁ・・
と思って試したのですが、上手く出来ませんでした。
よろしくお願いします。

###補足情報(言語/FW/ツール等のバージョンなど)
chromeで動いてくれればＯＫです。

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

回答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>４つの数字入力をどうぞ</div>
9<input type="number" id="kai1" min="0" max="9" value="0" autofocus/>
10<input type="number" id="kai2" min="0" max="9" value="0"/>
11<input type="number" id="kai3" min="0" max="9" value="0"/>
12<input type="number" id="kai4" min="0" max="9" value="0"/>
13<input type="button" id="kaiket" value="決定"/><br/>
14<div id="hyouji">表示</div>
15
16<script>
17    "use strict";
18    document.addEventListener("DOMContentLoaded", function () {
19        const kaiket = document.getElementById("kaiket");
20        const hyouji = document.getElementById("hyouji");
21        const kai = document.querySelectorAll("input[type='number']");
22
23        for (let i = 0; i < kai.length; i++) {
24            kai[i].addEventListener("focus", function () {
25                kai[i].select();
26            });
27
28            let focusTarget = i + 1 === kai.length ? kaiket : kai[i + 1];
29            kai[i].addEventListener("keyup", function (evt) {
30                let kc = evt.keyCode;
31                if (kc >= 96 && kc <= 105) {
32                    hyouji.textContent = "キーコード：" + kc + "が押されました";
33                    focusTarget.focus();
34                }
35            });
36        }
37
38        kaiket.addEventListener("click", function () {
39            hyouji.textContent = "お終い";
40        });
41    }, false);
42</script>
43</body>
44</html>