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

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

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

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

HTML

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

Q&A

2回答

2608閲覧

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

akihideEgashira

総合スコア8

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/04/11 07:41

編集2022/01/12 10:55

前提・実現したいこと

以下の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ハズレ←結果を表示

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

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

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

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

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

kei344

2018/04/11 07:54

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

2018/04/11 07:58

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

2018/04/11 08:14

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

回答2

0

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

javascript

1// a,bだとわかりづらいので 2const user = a; 3const com = b; 4 5const eq = (n, i) => n === com[i]; 6const isStraight = user.every(eq); 7const isBox = user.some(eq);

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

投稿2018/04/11 08:10

編集2018/04/11 08:12
taqm

総合スコア65

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

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

akihideEgashira

2018/04/11 08:17

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

0

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

JavaScript

1"use strict"; 2{ 3 //重複選択無しの場合 4 const isStraight = (a, b) => a.every(v => b.indexOf(v) > -1); 5 const isBox = (a, b) => a.some(v => b.indexOf(v) > -1); 6 const match = (a, b) => isStraight(a, b) ? "S" : isBox(a, b) ? "B" : "N"; 7} 8{ 9 //重複選択ありの場合 10 const isStraight = (a, b) => a.sort().join() == b.sort().join(); 11 const isBox = (a, b) => a.some(v => b.indexOf(v) > -1); 12 const match = (a, b) => isStraight(a, b) ? "S" : isBox(a, b) ? "B" : "N"; 13}

投稿2018/04/11 08:20

defghi1977

総合スコア4756

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

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

akihideEgashira

2018/04/11 08:30

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問