javascriptでジャンケンゲーム（勝敗の表示）

javascriptの練習としてジャンケンゲームを作っています。
入力フォームに
①「グー、チョキ、パー」のいづれかをクリックすると、
②①に反応して、乱数で「グー、チョキ、パー」のいづれかが表示され、
③①と②の値に応じて、勝敗を表示させたいです。

今のところ、①②までは出来たのですが、③の部分で、②で表示された値の定義、渡し方がうまくいきません。

js部分の②の値の渡し方について、アドバイスいただけると助かります。

html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>じゃんけん</title>
	<link rel="stylesheet" href="css/styles2.css">
</head>
<body>
	<div>
        <label for="janken">ジャンケン</label>
        <input type="text" id="janken" />
    </div>
    <div class="button" >
        <button type="submit" id="btnclient">ポン！</button>
    </div>
    
    
	<div id="btnresult">?</div>
	<p id="result">
	<script src="js/main2.js"></script>
</body>
</html>

```javascript
(function(){
	'use strict';

	var btnclient= document.getElementById('btnclient');
    var btnresult= document.getElementById('btnresult');
    var result= document.getElementById('result');
    var jankenForm = document.getElementById('janken');
    var janpon = jankenForm.value;
    var resultForm = document.getElementById('btnresult');
    
    

	btnclient.addEventListener('click', function(){
		// var n= Math.random();
		// if(n<0.33){
		// 	btnresult.textContent ='グー';
		// }else if(n<0.67){
		// 	btnresult.textContent = 'チョキ';
		// }else{
		// 	btnresult.textContent = 'パー';
		// }

		var shape;
		var n;
    if (n < 1 / 3) {
      shape = 'グー';
    } else if (n < 2 / 3) {
      shape  = 'チョキ';
    } else {
      shape  = 'パー';
    }
    btnresult.innerHTML = shape;

		

		if(shape == "パー" && janken =="チョキ"){
			result.innerHTML = "勝ち！"
		}　else if (shape == "グー" && janken =="パー") 
		{result.innerHTML = "勝ち！"}
		else if (shape == "チョキ" && janken =="グー") 
		{result.innerHTML = "勝ち！"}
		else if (shape == "パー" && janken =="グー") 
		{result.innerHTML = "負け！"}
		else if (shape == "グー" && janken =="チョキ") 
		{result.innerHTML = "負け！"}
		else if (shape == "チョキ" && janken =="パー") 
		{result.innerHTML = "負け！"}
		　else{
			result.innerHTML = "あいこ"
		}

	　　
	// var btnResult = resultForm.value;
		
	
		
		
	});

	jankenForm.addEventListener('click', function(){
			this.select();
		});
})();

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

回答1件

ベストアンサー

①「グー、チョキ、パー」のいづれかをクリックすると、

コードを見る限り、ボタンではなくテキストボックスに入力する形になってますが...。

②で表示された値の定義、渡し方がうまくいきません。

ランダムで生成した手を変数に入れればよいのでは？

lang
1    var shape;
2    if (n < 1 / 3) {
3      shape = 'グー';
4    } else if (n < 2 / 3) {
5      shape  = 'チョキ';
6    } else {
7      shape  = 'パー';
8    }
9    btnresult.innerHTML = shape;

lang
1if(btnResult = "パー" && janken ="チョキ"){

=ではなく==ですね。

##追記 2017/11/04 19:29

lang
1var n;

これではnに数字も何も入ってないですよね。もともとあった

lang
1var n = Math.random();

を入れればよいのでは？

また、jankenが定義されていないです。janponのつもりで書いていると思うのですが。

投稿2017/11/03 17:15

編集2017/11/04 10:30

karamarimo

総合スコア2551

sakeota

2017/11/04 06:05

ありがとうございます。 =を==に直したところ、エラー文は消えたのですが、var shapeを定義しても、「あいこ」以外の結果表示がうまくいきません。テキストボックスに入れているキーの渡し方がよくないのでしょうか。 javascript >> btnclient.addEventListener('click', function(){ var shape; var n; if (n < 1 / 3) { shape = 'グー'; } else if (n < 2 / 3) { shape = 'チョキ'; } else { shape = 'パー'; } btnresult.innerHTML = shape; if(shape == "パー" && janken =="チョキ"){ result.innerHTML = "勝ち！" }　else if (shape == "グー" && janken =="パー") {result.innerHTML = "勝ち！"} else if (shape == "チョキ" && janken =="グー") {result.innerHTML = "勝ち！"} else if (shape == "パー" && janken =="グー") {result.innerHTML = "負け！"} else if (shape == "グー" && janken =="チョキ") {result.innerHTML = "負け！"} else if (shape == "チョキ" && janken =="パー") {result.innerHTML = "負け！"} 　else{ result.innerHTML = "あいこ" } 　　 });

karamarimo

2017/11/04 06:53

var n; に何も代入していないのでは...? 質問文に全コードを載せてもらえますか？

sakeota

2017/11/04 09:15

質問文を更新して、コードを全て記載しました。ありがとうございます。

karamarimo

2017/11/04 11:52

開発者コンソールを使えばエラーなどをチェックできるので活用してください。

sakeota

2017/11/04 12:54

有り難うございました。最終的に、var n;の定義を戻したのと、var janpon = jankenForm.value;をaddEventListenerの中に定義したら、思い通りの結果になりました。今回、==を=に直していたときには、コンソールでエラーが出ていたのですが、それ以外は、elseに記載があったからか、エラーが出ませんでした。 htmlは、変更していませんが、jsのコードは最終的に以下に変更しました。沢山ご教示いただき、有り難うございました。 >>jsのコード (function(){ 'use strict'; var btnclient= document.getElementById('btnclient'); var btnresult= document.getElementById('btnresult'); var result= document.getElementById('result'); var jankenForm = document.getElementById('janken'); var resultForm = document.getElementById('btnresult'); btnclient.addEventListener('click', function(){ // var n= Math.random(); // if(n<0.33){ // btnresult.textContent ='グー'; // }else if(n<0.67){ // btnresult.textContent = 'チョキ'; // }else{ // btnresult.textContent = 'パー'; // } var janpon = jankenForm.value; var shape; var n = Math.random(); if (n < 1 / 3) { shape = 'グー'; } else if (n < 2 / 3) { shape = 'チョキ'; } else { shape = 'パー'; } btnresult.innerHTML = shape; if(shape == "パー" && janpon =="チョキ"){ result.innerHTML = "勝ち！" }　else if (shape == "グー" && janpon =="パー") {result.innerHTML = "勝ち！"} else if (shape == "チョキ" && janpon =="グー") {result.innerHTML = "勝ち！"} else if (shape == "パー" && janpon =="グー") {result.innerHTML = "負け！"} else if (shape == "グー" && janpon =="チョキ") {result.innerHTML = "負け！"} else if (shape == "チョキ" && janpon =="パー") {result.innerHTML = "負け！"} 　else{ result.innerHTML = "あいこ" } 　　 // var btnResult = resultForm.value; }); jankenForm.addEventListener('click', function(){ this.select(); }); })();

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