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

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

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

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

HTML

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

Q&A

解決済

1回答

732閲覧

入力した数値とランダムで選ばれた数値から当選結果を出す

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/02/12 16:05

編集2018/02/13 05:35

前提・実現したいこと

0から9の三つの数字を入力←ユーザ
0から9をランダムに三つ抽選←コンピュータ

結果ボタンをクリックしたら、
大当たり←数字と並び全て同じ
当たり←数字が全て同じ
ハズレ←その他
が表示されるプログラムを書きたいのですが上手くいきません。
よろしくお願いいたしします。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6</head> 7<body> 8 <input type="text" size="15" value="0から9までの数値" id="number1"> 9 <input type="text" size="15" value="0から9までの数値" id="number2"> 10 <input type="text" size="15" value="0から9までの数値" id="number3"> 11 12<br /> 13<br /> 14 <input type="button" value="当たっているかな" id="button"> 15<br /> 16<br /> 17 18 <div id = "USER">USER:</div> 19 <div id = "COM">COM :</div> 20 <div id="result">当選結果:</div> 21 22 <script type="text/javascript" src=""></script> 23</body> 24</html> 25 26```Javascript

button.addEventListener('click', function(){
var number1 = document.getElementById("number1").value;
var number2 = document.getElementById("number2").value;
var number3 = document.getElementById("number3").value;
var button = document.getElementById("button");
var USER = document.getElementById("USER");
var COM = document.getElementById("COM");
var result = document.getElementById("result");

var nums = [0,1,2,3,4,5,6,7,8,9]; var randnum1 = Math.floor(Math.random()*nums.length); var randnum2 = Math.floor(Math.random()*nums.length); var randnum3 = Math.floor(Math.random()*nums.length); USER.innerHTML += "[" + number1 + "]" + "[" +number2 + "]"+ "[" + number3 + "]"; COM.innerHTML += "[" + randnum1 + "]" + "[" +randnum2 + "]"+ "[" + randnum3 + "]";

},false);

### 試したこと ユーザに三つの数字を入力される、コンピュータがランダムに三つの数字を選ぶところまでプログラムを書きました。 どうすれは、判定を出せるのかというところで詰まっています。 配列などの考えを使えばできるようなのですが、、、 ### 補足情報 判定するときに自分がやってみたこと if(number1 === randnum1 && number1 === randnum2 &&number1 === randnum3){ result.innerHTML += "大当たり"; } のようにやってみたのですが、上手く処理されません。 また、できたとしても当たれ判定をするには条件がめちゃくちゃ長くなってしまいます。

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

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

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

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

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

kei344

2018/02/12 16:20

判定部分について、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
退会済みユーザー

退会済みユーザー

2018/02/13 05:39 編集

補足で自分がやってみたことを書いてみました。アドバイスありがとうございます。
guest

回答1

0

ベストアンサー

たとえばこういう感じとか。

  • input要素はテキストなので parseInt して比較しています。
  • join は配列を引数の文字列で連結します。(同じ並びなら同じ文字列になるので「大当たり」)
  • アロー関数とか使っているのでわかりにくいかもしれないが、every は配列要素すべてに引数の関数を実行してすべてが true かどうかを判定していて、includes は引数と同じ要素が配列に入っているかを判定している。

HTML

1<input type="text" size="15" value="1" placeholder="0から9までの数値" id="number1"> 2<input type="text" size="15" value="2" placeholder="0から9までの数値" id="number2"> 3<input type="text" size="15" value="3" placeholder="0から9までの数値" id="number3"> 4<br /> 5<br /> 6<input type="button" value="当たっているかな" id="button"> 7<br /> 8<br /> 9<div id="USER">USER:</div> 10<div id="COM">COM :</div> 11<div id="result">当選結果:</div>

JavaScript

1document.getElementById( 'button' ).addEventListener('click', function(){ 2 var number = [ 3 parseInt( document.getElementById( 'number1' ).value, 10 ) 4 , parseInt( document.getElementById( 'number2' ).value, 10 ) 5 , parseInt( document.getElementById( 'number3' ).value, 10 ) 6 ]; 7 var USER = document.getElementById( 'USER' ); 8 var COM = document.getElementById( 'COM' ); 9 var result = document.getElementById( 'result' ); 10 var nums = [/*0,*/1,2,3/*,4,5,6,7,8,9*/];/* テストのため勝率を上げている */ 11 var randnum = [ 12 Math.floor( Math.random() * nums.length ) 13 , Math.floor( Math.random() * nums.length ) 14 , Math.floor( Math.random() * nums.length ) 15 ]; 16 17 USER.innerHTML += '[' + number.join( '][' ) + ']'; 18 COM.innerHTML += '[' + randnum.join( '][' ) + ']'; 19 if ( number.join( '|' ) === randnum.join( '|' ) ) { 20 result.innerHTML += '[大当たり]'; 21 } else if( number.every( e => randnum.includes( e ) ) ) { 22 result.innerHTML += '[当たり]'; 23 } else { 24 result.innerHTML += '[はずれ]'; 25 } 26}, false ); 27```**動くサンプル:**[https://jsfiddle.net/wunq84rm/](https://jsfiddle.net/wunq84rm/) 28 29--- 30 31【input 要素 - HTML | MDN】( placeholder ) 32[https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#attr-placeholder](https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#attr-placeholder) 33 34【parseInt() - JavaScript | MDN】 35[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt) 36 37【Array.prototype.join() - JavaScript | MDN】 38[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join) 39 40【アロー関数 - JavaScript | MDN】 41[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions) 42 43【Array.prototype.every() - JavaScript | MDN】 44[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every) 45 46【Array.prototype.includes() - JavaScript | MDN】 47[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) 48 49--- 50 51**追記:** 52 53複数ミスがあったので修正。 54 55```JavaScript 56document.getElementById( 'button' ).addEventListener('click', function(){ 57 var number = [ 58 parseInt( document.getElementById( 'number1' ).value, 10 ) 59 , parseInt( document.getElementById( 'number2' ).value, 10 ) 60 , parseInt( document.getElementById( 'number3' ).value, 10 ) 61 ]; 62 var USER = document.getElementById( 'USER' ); 63 var COM = document.getElementById( 'COM' ); 64 var result = document.getElementById( 'result' ); 65 var nums = [0,1,2,3/*,4,5,6,7,8,9*/];/* テストのため勝率を上げている */ 66 var randnum = [ 67 Math.floor( Math.random() * nums.length ) 68 , Math.floor( Math.random() * nums.length ) 69 , Math.floor( Math.random() * nums.length ) 70 ]; 71 72 USER.innerHTML += '[' + number.join( '][' ) + ']'; 73 COM.innerHTML += '[' + randnum.join( '][' ) + ']'; 74 if ( number.join( '|' ) === randnum.join( '|' ) ) { 75 result.innerHTML += '[大当たり]'; 76 } else if( number.sort().join( '|' ) === randnum.sort().join( '|' ) ) { /* 並び替えてチェックに変更 */ 77 result.innerHTML += '[当たり]'; 78 } else { 79 result.innerHTML += '[はずれ]'; 80 } 81}, false ); 82```**動くサンプル:**[https://jsfiddle.net/wunq84rm/2/](https://jsfiddle.net/wunq84rm/2/)

投稿2018/02/12 17:42

編集2018/02/13 01:55
kei344

総合スコア69364

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

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

x_x

2018/02/13 00:57

number = [1, 1, 1] で、randnum = [1, 2, 3] なら当たりになってしまいませんか?
kei344

2018/02/13 01:46

あ、そうですね。考えます。
退会済みユーザー

退会済みユーザー

2018/02/13 05:36

だいたいの考え方は、理解できました!ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問