イベントハンドラーに関しての質問

javascript
javascriptについての質問です。
二つのボタンをつくり
１つめのボタンには今日の夕食
２つめのボタンには今日の服装として
ルーレットを作りたいと思います
実際に作ってみたところ１つめのボタンだけ反応したり、２つめのボタンが反応すると答えが１つめの回答になったりなど苦戦しております。
イベントハンドラーについて教科書やwebで勉強をしておりますが、2つを動かすという作業にくせんしております。
プログラム初心者なため、どこを変えたらいいのかソースをお願いしたいです。
ご教授お願い致します。

コード

<html> <head> <title>ルーレットゲーム</title> </head> <body> <input id="dinner_btn1" type="button" value="今日の夕食は？"> <input id="dinner_btn2" type="button" value="今日の服装は？"> <script> document.getElementById( "dinner_btn1" ).onclick =function() { document.getElementById( "dinner_btn2" ).onclick =function() { var x = Math.floor( Math.random()*7 ); var y= Math.floor( Math.random()*3 ); var dinner; var code; if (x === 0) dinner = "鍋"; if (x === 1) dinner = "焼肉"; if (x === 2) dinner = "中華"; if (x === 3) dinner = "彼女の手料理"; if (x === 4) dinner = "イタリアン"; if (x === 5) dinner = "寿司"; if (x === 6) dinner = "麺"; alert(dinner); } if (y === 0) code = "身軽な服"; if (y === 1) code = "パーティ用"; if (y === 2) code = "ゴリゴリ"; alert(code); } </script> </body> </html>

Orlofsky

2019/09/06 00:26

コードは https://teratail.com/help/question-tips#questionTips3-7 の [コード] に修正してください。

m.ts10806

2019/09/06 00:37

質問は編集できます。タイトルにタグを含む必要はありません。同じJavaScriptについての質問で要件が違う場合タイトルで区別がつきません。起きている問題や実現したいことに寄せたタイトルにしてください。

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

回答3件

ベストアンサー

js
1document.getElementById( "dinner_btn1" ).onclick =function() {
2// 中身
3}

↑と書くと、dinner_btn1のボタンをクリックしたときに、// 中身の部分が実行されます。クリックするまでは実行されません。

なので、

js
1document.getElementById( "dinner_btn1" ).onclick =function() {
2document.getElementById( "dinner_btn2" ).onclick =function() {
3// 略
4alert(dinner);
5}
6// 略
7alert(code);
8}

という↑ご提示のコードは、クリックすると↓以下の部分が実行されます。

js
1document.getElementById( "dinner_btn2" ).onclick =function() {
2// 略
3alert(dinner);
4}
5// 略
6alert(code);

↑これは想定と異なるのではないですか？
おそらく想定しているのは、

js
1// 略
2alert(code);

↑だけだと思います。

なので、解決方法としては、「余分なコードを外に出す」のがいいと思います。

js
1document.getElementById( "dinner_btn1" ).onclick =function() {
2// 略
3}
4document.getElementById( "dinner_btn2" ).onclick =function() {
5// 略
6}

投稿2019/09/06 00:29

Lhankor_Mhy

総合スコア36930

やりたいことが２つ混ぜて書かれているので、それぞれのボタンの処理を分けて書けばいいと思いますよ

投稿2019/09/05 23:26

shirokuma4690

総合スコア154

イベントハンドラーについて教科書やwebで勉強をしております

もし教科書にonclickが書いてあるならそうとう古いそうなので別のものを使ったほうがよいと思います
また値のチェックをifの多様で行うのは非効率なので配列を使うほうが良いと思います

javascript
1
2<script>
3window.addEventListener('DOMContentLoaded', function(){
4  document.getElementById( "dinner_btn1" ).addEventListener('click',function(){
5    var dinners=["鍋","焼肉","中華","彼女の手料理","イタリアン","寿司","麺"];
6    var x = Math.floor( Math.random()*dinners.length);
7    var dinner=dinners[x];
8    alert(dinner);
9  });
10  document.getElementById( "dinner_btn2" ).addEventListener('click',function(){
11    var codes=["身軽な服","パーティ用","ゴリゴリ"]; 
12    var y = Math.floor( Math.random()* codes.length);
13    var code=codes[y];
14    alert(code);
15  });
16});
17</script>
18<input id="dinner_btn1" type="button" value="今日の夕食は？">
19<input id="dinner_btn2" type="button" value="今日の服装は？">