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

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

ただいまの
回答率

90.12%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,493
退会済みユーザー

退会済みユーザー

 前提・実現したいこと

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

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

 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" size="15" value="0から9までの数値" id="number1">
    <input type="text" size="15" value="0から9までの数値" id="number2">
    <input type="text" size="15" value="0から9までの数値" id="number3">

<br />
<br />
    <input type="button" value="当たっているかな" id="button">
<br />
<br />

    <div id = "USER">USER:</div>
    <div id = "COM">COM :</div>
    <div id="result">当選結果:</div>

    <script type="text/javascript" src=""></script>
</body>
</html>

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 += "大当たり";
}

のようにやってみたのですが、上手く処理されません。
また、できたとしても当たれ判定をするには条件がめちゃくちゃ長くなってしまいます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/02/13 01:20

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/02/13 01:33 編集

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

    キャンセル

回答 1

checkベストアンサー

+2

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

  • input要素はテキストなので parseInt して比較しています。
  • join は配列を引数の文字列で連結します。(同じ並びなら同じ文字列になるので「大当たり」)
  • アロー関数とか使っているのでわかりにくいかもしれないが、every は配列要素すべてに引数の関数を実行してすべてが true かどうかを判定していて、includes は引数と同じ要素が配列に入っているかを判定している。
<input type="text" size="15" value="1" placeholder="0から9までの数値" id="number1">
<input type="text" size="15" value="2" placeholder="0から9までの数値" id="number2">
<input type="text" size="15" value="3" placeholder="0から9までの数値" id="number3">
<br />
<br />
<input type="button" value="当たっているかな" id="button">
<br />
<br />
<div id="USER">USER:</div>
<div id="COM">COM :</div>
<div id="result">当選結果:</div>
document.getElementById( 'button' ).addEventListener('click', function(){
    var number = [
          parseInt( document.getElementById( 'number1' ).value, 10 )
        , parseInt( document.getElementById( 'number2' ).value, 10 )
        , parseInt( document.getElementById( 'number3' ).value, 10 )
      ];
    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 randnum = [
          Math.floor( Math.random() * nums.length )
        , Math.floor( Math.random() * nums.length )
        , Math.floor( Math.random() * nums.length )
      ];

    USER.innerHTML += '[' + number.join( '][' ) + ']';
    COM.innerHTML += '[' + randnum.join( '][' ) + ']';
    if ( number.join( '|' ) === randnum.join( '|' ) ) {
        result.innerHTML += '[大当たり]';
    } else if( number.every( e => randnum.includes( e ) ) ) {
        result.innerHTML += '[当たり]';
    } else {
        result.innerHTML += '[はずれ]';
    }
}, false );

動くサンプル:https://jsfiddle.net/wunq84rm/


【input 要素 - HTML | MDN】( placeholder )
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#attr-placeholder

【parseInt() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt

【Array.prototype.join() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join

【アロー関数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

【Array.prototype.every() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every

【Array.prototype.includes() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes


追記:

複数ミスがあったので修正。

document.getElementById( 'button' ).addEventListener('click', function(){
    var number = [
          parseInt( document.getElementById( 'number1' ).value, 10 )
        , parseInt( document.getElementById( 'number2' ).value, 10 )
        , parseInt( document.getElementById( 'number3' ).value, 10 )
      ];
    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 randnum = [
          Math.floor( Math.random() * nums.length )
        , Math.floor( Math.random() * nums.length )
        , Math.floor( Math.random() * nums.length )
      ];

    USER.innerHTML += '[' + number.join( '][' ) + ']';
    COM.innerHTML += '[' + randnum.join( '][' ) + ']';
    if ( number.join( '|' ) === randnum.join( '|' ) ) {
        result.innerHTML += '[大当たり]';
    } else if( number.sort().join( '|' ) === randnum.sort().join( '|' ) ) { /* 並び替えてチェックに変更 */
        result.innerHTML += '[当たり]';
    } else {
        result.innerHTML += '[はずれ]';
    }
}, false );

動くサンプル:https://jsfiddle.net/wunq84rm/2/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/13 09:57

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

    キャンセル

  • 2018/02/13 10:46

    あ、そうですね。考えます。

    キャンセル

  • 2018/02/13 14:36

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

    キャンセル

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

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる