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

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

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

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

Q&A

解決済

3回答

312閲覧

ランダムに並び替えられた配列とそれに対応するidを関連付ける方法はありますか?

Kei0

総合スコア13

JavaScript

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

0グッド

0クリップ

投稿2018/07/06 12:32

編集2018/07/06 14:30

説明です、配列array[1,2,3,4,5]と0が代入された変数pとhtml欄にtableでレイアウトされたid1,2,3,4,5を持つ1,2,3,4,5があります。最初に配列をバラバラに並び替え、ボタンを押すたびにp++され、pが1だった場合配列の0番を出力、pが2だった場合配列の1番を出力して重複しないランダムボタンができました。そして問題です。tableの1,2,3,4,5とランダムボタンが連動して、ランダムボタンが出力した数字と同じtableの数字がXとなるようにしたいのですが、2つの関係がありません。どうしたら表現できますか?もしかしてidが悪いとか、、回答お願いします。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>tets</title> </head> <body> <input type="button" value="ランダム表示" onclick="choice()"> <table border="1"> <tr> <td><span id="1">1</span></td> <td><span id="2">2</span></td> <td><span id="3">3</span></td> <td><span id="4">4</span></td> <td><span id="5">5</span></td> </tr> </table> <span id="outText" style="font-size:200%;"></span> <span id="subText" style="font-size:150%;"></span> <span id="threeText" style="font-size:100%;"></span> <div id="end"></div> <script> var array = [1,2,3,4,5]; for (var i = array.length - 1; i >= 0; i--){ var rand = Math.floor( Math.random() * ( i + 1 ) ); [array[i], array[rand]] = [array[rand], array[i]] } console.log(array); var p = 0; var choice = function(){ p = p+1; if(p === 1){ document.getElementById('outText').textContent = array[0]; } if(p === 2){ document.getElementById('outText').textContent = array[1]; document.getElementById('subText').textContent = ',' + array[0]; } if(p === 3){ document.getElementById('outText').textContent = array[2]; document.getElementById('subText').textContent = ',' + array[1]; document.getElementById('threeText').textContent = ',' + array[0]; } if(p === 4){ document.getElementById('outText').textContent = array[3]; document.getElementById('subText').textContent = ',' + array[2]; document.getElementById('threeText').textContent = ',' + array[1]; } if(p === 5){ document.getElementById('outText').textContent = array[4]; document.getElementById('subText').textContent = ',' + array[3]; document.getElementById('threeText').textContent = ',' + array[2]; } if(p === 5){ document.getElementById('end').textContent = '終了しました'; var div_element = document.createElement("div"); div_element.innerHTML = "<input type='button' style='width:30%;padding:5px;font-size:30px;' value='もう一度' onclick='window.location.reload();'>"; var parent_object = document.getElementById('end'); parent_object.appendChild(div_element); } } </script> </body> </html>

イメージ説明
上記のコードだとこのようになります。Xは選ばれた数字にマークするのものです。分かりづらくてすみませんでした。

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

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

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

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

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

oikashinoa

2018/07/06 13:32

そして問題です。tableの  〜  2つの関係がありません。   の部分がイメージ湧きません。あとXってなんでしょ。もう少し今表示しているテーブルとかを使って図示してただけると。
oikashinoa

2018/07/06 14:22

document.getElementById('zTwo').textContent = 'xx';  とかでXにしているんですか?  1.コメントアウトされているけどXにしているのはどこ?2.zTwoなんてIDないです。      動かなった時の本当のソースに修正して下さい。間違い探しをするのに、情報が信用ならない(こちらの勘違いなら申し訳ない)のはなんとも。しんどい。
Kei0

2018/07/06 14:37

誤解を生んでしまってすみません。コメントは消し忘れ、です。私が書いているプログラムの数字は1~31まであり、要らないプログラムも多数あるので短縮版を書きました。その際間違いが生じたということです。zOne,zTwoは、テーブルの数字の前のidです。態々英語で書く必要もないので変えました。細かいですが、テーブルの文字をXと書き換えるとサイズのせいでテーブルの形が多少可笑しくなるのでxxにしました。
guest

回答3

0

学校の宿題ですかね?頑張っているようでなによりです。
たぶん何度か言われていると思いますが、できるだけ情報は多く正確に出しましょう。

…何をしたいかは分かりました。こちらから宿題です。少し考えてみて下さい。

1.〜textContent = 'xx'のところで、”ランダム表示”ボタンで表示した数字にXを付けたかったんですよね。ほとんど完成してますよ。'zTwo'の代わりにランダム表示ボタンで表示した数字を指定してあげて下さい。

JS

1 if(p === 2){ 2 document.getElementById('zTwo').textContent = 'xx'; 3 document.getElementById('outText').textContent = array[1]; 4 document.getElementById('subText').textContent = ',' + array[0]; 5 }

2.配列の番号は0から始まりますが、ってご自身で言われてますよね。変数pとarray[]で注目しているindexとが ズレていてモヤモヤします、直してみましょう。
自分の好きでいいじゃん と思うかもしれませんが、これから他人のソースを見るときアナタがモヤモヤします。

3.2をすると、どこで変数pを+1すればよいでしょうか?

動くものも出来てますけど、一度考えて下さい。あしたお昼には回答出します。…出せない時は他の人が回答してくれます。きっと。頑張っている姿勢が感じられますんで。

投稿2018/07/06 15:15

編集2018/07/06 15:16
oikashinoa

総合スコア2826

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

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

Kei0

2018/07/07 00:16

if(p === 2){ if(array[1] === 1){ document.getElementById('1').textContent = 'xx'; } if(array[1] === 2){ document.getElementById('2').textContent = 'xx'; } if(array[1] === 3){ document.getElementById('3').textContent = 'xx'; } if(array[1] === 4){ document.getElementById('4').textContent = 'xx'; } if(array[1] === 5){ document.getElementById('5').textContent = 'xx'; } document.getElementById('outText').textContent = array[1]; document.getElementById('a2').textContent = ',' + array[1]; document.getElementById('subText').textContent = ',' + array[0]; } アドバイスありがとうございます! 0と1を揃える、は断念しましたが本題は出来ました。ifの中にifを書くことはエラーになる思っていたので一度も試していなかったですが、いざやってみて正解でした。ただ凄く効率が悪くなってしまいました。もっと短くする書き方はありますか?
guest

0

pを0からに変更して、共通点をまとめると以下のような感じになります。スッキリ。

js

1 var choice = function () { 2 3 document.getElementById(array[p]).textContent = 'xx'; 4 document.getElementById('outText').textContent = array[p]; 5 if (p > 0) { 6 document.getElementById('subText').textContent = ',' + array[p - 1]; 7 } 8 if (p > 1) { 9 document.getElementById('threeText').textContent = ',' + array[p - 2]; 10 } 11 if (p === 4) { 12 document.getElementById('end').textContent = '終了しました'; 13 var div_element = document.createElement("div"); 14 div_element.innerHTML = "<input type='button' style='width:30%;padding:5px;font-size:30px;' value='もう一度' onclick='window.location.reload();'>"; 15 var parent_object = document.getElementById('end'); 16 parent_object.appendChild(div_element); 17 } 18 p++; 19 }

投稿2018/07/08 06:20

oikashinoa

総合スコア2826

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

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

0

ベストアンサー

お約束のサンプルです。

  1. 変数pの0と1を揃えました。何か法則が有るように見えませんか?
  2. array[p].toString()って何しているか分かります?
  3. 変数p=0と1 動かさないので不要だけどコードを足しました。p=0から4で共通点はありませんか?
  4. 共通点を元に関数化してみて下さい。似ているけど異なる箇所は計算したりifで実行させないようにいてみて下さい

js

1var array = [1, 2, 3, 4, 5]; 2 3for (var i = array.length - 1; i >= 0; i--) { 4 5 var rand = Math.floor(Math.random() * (i + 1)); 6 7 [array[i], array[rand]] = [array[rand], array[i]] 8 9} 10 11var p = 0; 12 13var choice = function () { 14 15 if (p === 0) { 16 document.getElementById(array[p].toString()).textContent = 'xx'; 17 document.getElementById('outText').textContent = array[0]; 18 // document.getElementById('subText').textContent = ',' + array[-1]; 19 // document.getElementById('threeText').textContent = ',' + array[-2]; 20 21 } 22 if (p === 1) { 23 document.getElementById(array[p].toString()).textContent = 'xx'; 24 document.getElementById('outText').textContent = array[1]; 25 document.getElementById('subText').textContent = ',' + array[0]; 26 // document.getElementById('threeText').textContent = ',' + array[-1]; 27 } 28 if (p === 2) { 29 document.getElementById(array[p].toString()).textContent = 'xx'; 30 document.getElementById('outText').textContent = array[2]; 31 document.getElementById('subText').textContent = ',' + array[1]; 32 document.getElementById('threeText').textContent = ',' + array[0]; 33 } 34 if (p === 3) { 35 document.getElementById(array[p].toString()).textContent = 'xx'; 36 document.getElementById('outText').textContent = array[3]; 37 document.getElementById('subText').textContent = ',' + array[2]; 38 document.getElementById('threeText').textContent = ',' + array[1]; 39 } 40 if (p === 4) { 41 document.getElementById(array[p].toString()).textContent = 'xx'; 42 document.getElementById('outText').textContent = array[4]; 43 document.getElementById('subText').textContent = ',' + array[3]; 44 document.getElementById('threeText').textContent = ',' + array[2]; 45 } 46 47 if (p === 4) { 48 document.getElementById('end').textContent = '終了しました'; 49 var div_element = document.createElement("div"); 50 div_element.innerHTML = "<input type='button' style='width:30%;padding:5px;font-size:30px;' value='もう一度' onclick='window.location.reload();'>"; 51 var parent_object = document.getElementById('end'); 52 parent_object.appendChild(div_element); 53 54 } 55 p++; 56 57}

投稿2018/07/07 04:20

oikashinoa

総合スコア2826

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

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

Kei0

2018/07/07 05:44

p++を最後にですか。pの初期値を-1にすることしか考えていなかったのでその手があったか!と、なるほど納得。toStoringは思いつきませんでした。便利ですが結果が数字の時だけですよね。結果がバナナとかだとif文しかなさそうです。ありがとうございます!!
oikashinoa

2018/07/08 06:11

実はdocument.getElementById(array[p]) とtoStoring()無しでも動きます。が、Kei0さんが書いているようにdocument.getElementById('1').textContent = 'xx';とidは文字列にすべきなので付けてます。 あと、変数pは配列のindexを示してますよね。で結果は配列のValueにいれますよね?(例)var array = [’ばなな’, ’りんご’, ’すいか’, ’もも’, ’なし’]; となれば今回と同じ方法でできますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問