質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

547閲覧

セレクトボタンのリンク

maaaai

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2023/01/23 04:29

編集2023/01/23 15:50

前提

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

2

ベストアンサー

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

投稿2023/01/23 04:40

int32_t

総合スコア20516

m.ts10806, yore👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maaaai

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 入門書などの関数の説明を読み直してください。
maaaai

2023/01/24 04:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。