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

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

ただいまの
回答率

90.12%

2つの配列を比較した結果に応じて表示を変化(JavaScript)

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 694

 前提・実現したいこと

以下のHTML, Javascriptにて、「当選結果を確認する」というボタンを押した際、USERとCOMとの数字の一致した数に応じて、「当選結果」のところに、「ストレート(USERとCOMの数字が3つとも一致)」「ボックス(USERとBOXの数字が最低1つ一致)」「ハズレ(一致せず)」と表示したいと思っていますが、そこで詰まってしまいました。どのようにすれば表示可能でしょうか?

**(追記箇所)
具体的には、
・まずUSERで入力した3つの数字とCOMでランダムに生成された3つの数字が順不同で全て一致した場合に「ストレート」を表示。次にUSER, COMの数字のうちいずれか1つでも一致した場合に「ボックス」と表示。最後に、USER, COMで生成された数字がどれも一致しなかった場合に「ハズレ」と表示。
・重複選択はありです。

・一度USER, COMの数値データを配列に入れて、その中の数字の一致の有無を求めようと、someとeveryを使用してやろうとしましたが、動きませんでした。ですので、someとeveryを使用して、USERとCOMとの数字が一致しているかどうかを検索し、その結果を表示するようにしたいです。
**

 発生している問題・エラーメッセージ

該当箇所が表示されず

 該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript_17_5</title>
</head>

<body>
  <h2>ナンバーズ3</h2>

  <div>
    <label for="numberInput">入力部:</label>
    <input type="number" id="input1" min="0" max="9">
    <input type="number" id="input2" min="0" max="9">
    <input type="number" id="input3" min="0" max="9">
  </div>

  <div>
    <input type="button" value="当選結果を確認する" onclick="functionAnswer()">
  </div>

  <div>
    <p>USER: <span id="answer1"></span><span id="answer2"></span><span id="answer3"></span></p>
    <p>COM: <span id="answer4"></span><span id="answer5"></span><span id="answer6"></span></p>
    <p>当選結果: <span id="answerBox"></span></p>
  </div>

  <script type="text/javascript" src="../javascript_test/js/javascript_17_5.js"></script>
</body>



(JavaScript)
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var input3 = document.getElementById('input3');
var inputArray = [input1, input2, input3];

var answer1 = document.getElementById('answer1');
var answer2 = document.getElementById('answer2');
var answer3 = document.getElementById('answer3');
var answer4 = document.getElementById('answer4');
var answer5 = document.getElementById('answer5');
var answer6 = document.getElementById('answer6');

var answerBox = document.getElementById('answerBox');


function functionAnswer() {
  answer1.innerHTML = input1.value;
  answer2.innerHTML = input2.value;
  answer3.innerHTML = input3.value;
  answer4.innerHTML = Math.floor(Math.random(0, 9) * 10);
  answer5.innerHTML = Math.floor(Math.random(0, 9) * 10);
  answer6.innerHTML = Math.floor(Math.random(0, 9) * 10);

 var answerUserArray = [answer1, answer2, answer3];
 var answerComputerArray = [answer4, answer5, answer6];


  if answerUserArray.every(answerComputerArray) {
    answerBox.innerHTML = "ストレート";
  } else if answerUserArray.some(answerComputerArray) {
    answerBox.innerHTML = "ボックス";
  } else {
    answerBox.innerHTML = "ハズレ";
  }
}

 試したこと

javascriptの配列some, everyを使用しようとしましたが、知識が足りずできませんでした。おそらくこれがあればいけるのではないかと思っています。

**(追記箇所)
条件が曖昧で申し訳ありません。「実現したいこと」「コード(JavaScriptの部分、自分でやってみたところ)」を追記致しました。まだ情報が不足しているようでしたら、ご指摘いただけると助かります。よろしくお願いいたします。
**

(資料)
HTMLページ
[0から9の数値][0から9の数値][0から9の数値]←入力部

[当たっているかな]←ボタンがクリックされたら入力の内容チェックし判断し可否を表示する

USER:[数値][数値][数値]←ユーザーが入力した数値
COM:[数値][数値][数値]←コンピューターの抽選した数値
当選結果:ストレートorボックスorハズレ←結果を表示

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2018/04/11 16:54

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

    キャンセル

  • defghi1977

    2018/04/11 16:58

    条件が曖昧です. 重複選択のありなし, 順不同のありなし等についての条件を追記願います.

    キャンセル

  • defghi1977

    2018/04/11 17:14

    ・重複選択はありです。 あちゃー「あり」か

    キャンセル

回答 2

+3

ナンバーズってことで順番も大事だと勝手に推測しました(宝くじですよね?

// a,bだとわかりづらいので
const user = a;
const com = b;

const eq = (n, i) => n === com[i];
const isStraight = user.every(eq);
const isBox = user.some(eq);

everysomeを使うというのはいい感じだと思います。
ただしJavaScriptをあまり学習されていないのでしたら
これらのコレクション関数ではなくForを使用することをお勧めします。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/11 17:17

    @taqmさん、ありがとうございます。私も今回初めてsomeとeveryを使用しまして、混乱をしてしまいました。とても参考になります。

    キャンセル

+2

例えばこんな.(本当ならテストケースを作ってテストしたほうがいいね)

"use strict";
{
    //重複選択無しの場合
    const isStraight = (a, b) => a.every(v => b.indexOf(v) > -1);
    const isBox = (a, b) => a.some(v => b.indexOf(v) > -1);
    const match = (a, b) => isStraight(a, b) ? "S" : isBox(a, b) ? "B" : "N";
}
{
    //重複選択ありの場合
    const isStraight = (a, b) => a.sort().join() == b.sort().join();
    const isBox = (a, b) => a.some(v => b.indexOf(v) > -1);
    const match = (a, b) => isStraight(a, b) ? "S" : isBox(a, b) ? "B" : "N";
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/11 17:30

    ありがとうございます!こちらでも動かしてみます!参考になります!

    キャンセル

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

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

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