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

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

ただいまの
回答率

90.52%

  • JavaScript

    16421questions

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

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

解決済

回答 3

投稿 編集

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

Kei0

score 7

説明です、配列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は選ばれた数字にマークするのものです。分かりづらくてすみませんでした。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • oikashinoa

    2018/07/06 22:32

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

    キャンセル

  • oikashinoa

    2018/07/06 23:22

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

    キャンセル

  • Kei0

    2018/07/06 23:37

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

    キャンセル

回答 3

+1

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

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/07 09: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を書くことはエラーになる思っていたので一度も試していなかったですが、いざやってみて正解でした。ただ凄く効率が悪くなってしまいました。もっと短くする書き方はありますか?

    キャンセル

checkベストアンサー

0

お約束のサンプルです。

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

}

var p = 0;

var choice = function () {

    if (p === 0) {
        document.getElementById(array[p].toString()).textContent = 'xx';
        document.getElementById('outText').textContent = array[0];
        // document.getElementById('subText').textContent = ',' + array[-1];
        // document.getElementById('threeText').textContent = ',' + array[-2];

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

    if (p === 4) {
        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);

    }
    p++;

}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/07 14:44

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

    キャンセル

  • 2018/07/08 15:11

    実はdocument.getElementById(array[p]) とtoStoring()無しでも動きます。が、Kei0さんが書いているようにdocument.getElementById('1').textContent = 'xx';とidは文字列にすべきなので付けてます。

    あと、変数pは配列のindexを示してますよね。で結果は配列のValueにいれますよね?(例)var array = [’ばなな’, ’りんご’, ’すいか’, ’もも’, ’なし’];
    となれば今回と同じ方法でできますよ。

    キャンセル

0

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

        var choice = function () {

            document.getElementById(array[p]).textContent = 'xx';
            document.getElementById('outText').textContent = array[p];
            if (p > 0) {
                document.getElementById('subText').textContent = ',' + array[p - 1];
            }
            if (p > 1) {
                document.getElementById('threeText').textContent = ',' + array[p - 2];
            }
            if (p === 4) {
                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);
            }
            p++;
        }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    16421questions

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