セレクトボタンのリンク

前提

JavaScript,HTML,CSSを使ってタイピングゲームを作っています
お題セレクトボタンを作りゲームをスタートさせたいです

実現したいこと

セレクトボタンでゲームが始まるようにしたい

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>タイピングゲーム</title>
5        <meta charset="utf-8">
6        <link rel="stylesheet" type="text/css" href="k22136.css" />
7        <script src="kotowaza-k22136.js"></script>
8        <script src="country-k22136.js"></script>
9        <script src="pref-k22136.js"></script>
10    </head>
11        <body>
12            <div class="imgt">
13                <p class="title">TYPING GAME</p>
14            </div>
15            <div class="wrap1">
16                <select name="" id="odai" onchange="myfunc()">
17                    <option disabled selected>      </option>
18                    <option value="ことわざ" style="text-align: center">ことわざ</option>
19                    <option value="国" style="text-align: center">国</option>
20                    <option value="都道府県" style="text-align: center">都道府県</option>
21                </select>
22                <script type="text/javascript">
23                    function myfunc() {
24                        var value = document.getElementById("odai").value;
25                        var target = document.getElementById("target");
26                        if(value === 'ことわざ'){
27                            var kotowaza = function ready1(){
28
29                            }
30                        }
31                        else if(value === '国'){
32                            var country = function ready2(){
33                                
34                            }
35                        }
36                        else if(value === '都道府県'){
37                            var pref = function ready3(){
38                                
39                            }
40                        }
41                    }
42                </script>
43                <p id="target"></p>
44                <div id="count"></div>
45                <h1><div id="japanese"></div></h1>
46                <h2><div id="word"></div></h2>
47                <div id="scoredis"></div>
48            </div>
49        </body>
50</html>

JavaScript
1const KOTOWAZA = ["ai"];
2    const KOTOWAZA_JP = ["あい"];
3    var wordlist;
4    var wordlistJapanese;                         
5    var time_limit = 60;
6    var readytime = 3;
7    var score;
8    var correct;
9    var mistake;
10    var char_num = 0;
11    var word_char;
12    var random;
13    function ready1(){
14        wordlist = KOTOWAZA;
15        wordlistJapanese = KOTOWAZA_JP;
16        readytime = 3;
17        scoredis.innerHTML = "";
18        kotowaza_button.style.visibility = "hidden";
19        var readytimer = setInterval(function(){
20            count.innerHTML = readytime;
21            readytime--;
22            if(readytime < 0){
23                clearInterval(readytimer);
24                gameStart();
25            }
26        },1000);
27    }
28    function gameStart(){
29        score = 0.0;
30        mistake = 0;
31        correct = 0;
32        wordDisplay();
33        var time_remaining = time_limit;
34        var gametimer = setInterval(function(){
35            count.innerHTML = "残り時間: " + time_remaining;
36            time_remaining--;
37            if(time_remaining <= 0){
38                clearInterval(gametimer);
39                finish();
40            }
41        },1000)
42    }
43    function wordDisplay(){
44        random = Math.floor(Math.random()*wordlist.length);
45        word.innerHTML = wordlist[random];
46        japanese.innerHTML = wordlistJapanese[random];
47        charInsort();
48    }
49    function charInsort(){
50        word_char = wordlist[random].charAt(char_num);
51    }
52    function finish(){
53        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
54        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
55        count.innerHTML = "";
56        word.innerHTML = "";
57        japanese.innerHTML = "";
58        start_button.style.visibility = "visible";
59        word_char = 0;
60        random = 0;
61        char_num = 0;
62    }
63document.onkeydown = function(e){
64    if(e.keyCode == 189){
65        keyStr = "-";
66    }
67    else if(e.keyCode == 188){
68        keyStr = ",";
69    }
70    else{
71        var keyStr = String.fromCharCode(e.keyCode);
72        keyStr = keyStr.toLowerCase();
73    }
74    if(keyStr == word_char){
75        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
76        char_num++;
77        correct++;
78        charInsort();
79    }
80    else{
81        new Audio('miss.mp3').play();
82        mistake++;
83    }
84    if(char_num == wordlist[random].length){
85        new Audio('correct.mp3').play();
86        char_num = 0;
87        wordDisplay();
88    }
89};

JavaScript
1const COUNTRY = ["afu"];
2    const COUNTRY_JP = ["アフ"];
3    var wordlist;
4    var wordlistJapanese;
5    var time_limit = 60;
6    var readytime = 3;
7    var score;
8    var correct;
9    var mistake;
10    var char_num = 0;
11    var word_char;
12    var random;
13    function ready2(){
14        wordlist = COUNTRY;
15        wordlistJapanese = COUNTRY_JP;
16        readytime = 3;
17        scoredis.innerHTML = "";
18        country_button.style.visibility = "hidden";
19        var readytimer = setInterval(function(){
20            count.innerHTML = readytime;
21            readytime--;
22            if(readytime < 0){
23                clearInterval(readytimer);
24                gameStart();
25            }
26        },1000);
27    }
28    function gameStart(){
29        score = 0.0;
30        mistake = 0;
31        correct = 0;
32        wordDisplay();
33        var time_remaining = time_limit;
34        var gametimer = setInterval(function(){
35            count.innerHTML = "残り時間: " + time_remaining;
36            time_remaining--;
37            if(time_remaining <= 0){
38                clearInterval(gametimer);
39                finish();
40            }
41        },1000)
42    }
43    function wordDisplay(){
44        random = Math.floor(Math.random()*wordlist.length);
45        word.innerHTML = wordlist[random];
46        japanese.innerHTML = wordlistJapanese[random];
47        PushSubscriptionOptions.innerHTML = wordlistphoto[random];
48        charInsort();
49    }
50    function charInsort(){
51        word_char = wordlist[random].charAt(char_num);
52    }
53    function finish(){
54        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
55        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
56        count.innerHTML = "";
57        word.innerHTML = "";
58        japanese.innerHTML = "";
59        photo.innerHTML = "";
60        start_button.style.visibility = "visible";
61        word_char = 0;
62        random = 0;
63        char_num = 0;
64    }
65document.onkeydown = function(e){
66    if(e.keyCode == 189){
67        keyStr = "-";
68    }
69    else if(e.keyCode == 188){
70        keyStr = ",";
71    }
72    else{
73        var keyStr = String.fromCharCode(e.keyCode);
74        keyStr = keyStr.toLowerCase();
75    }
76    if(keyStr == word_char){
77        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
78        char_num++;
79        correct++;
80        charInsort();
81    }
82    else{
83        new Audio('miss.mp3').play();
84        mistake++;
85    }
86    if(char_num == wordlist[random].length){
87        new Audio('correct.mp3').play();
88        char_num = 0;
89        wordDisplay();
90    }
91};

試したこと

HTMLのセレクトボタンでchangeイベントをいれましたが動きません

補足情報（FW/ツールのバージョンなど）

環境OS、VScode

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

回答1件

ベストアンサー

Firefox以外のブラウザでは <option> はただのデータという扱いらしく、click イベントは起きません。<select> の change イベントを処理し、選択された値によって呼ぶ関数を変更するようなコードを書く必要があります。

投稿2023/01/23 04:40

int32_t

総合スコア20850

yore

2023/01/23 15:53

回答ありがとうございます。changeイベントを追加しましたが、うまく動きません。調べたりしましたが勉強不足のためうまく動きませんでした、回答お願いしたいです。

int32_t

2023/01/23 22:11

現在の質問文の myfunc() の中では、中身が空っぽの関数式をローカル変数に代入してそのローカル変数を何にも使っていません。つまり myfunc() は何もしてないのと同じです。 if (value === 'ことわざ') { ready1(); } else if (value === '国'){ ready2(); } else if (value === '都道府県') { ready3(); } こんな感じでいいのですけども、ごく基本的な関数の呼び出しを間違えるのは基礎の理解が足りていない気がします。JavaScript 入門書などの関数の説明を読み直してください。

yore

2023/01/24 04:12

jsのほうを書き換えてみたらできました。ありがとうございます。勉強し直します。

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