ここから本文です

Javascriptでのランダム表示で、2番目以降はかぶらないようにしたい Javascript...

tom********さん

2019/5/1920:43:22

Javascriptでのランダム表示で、2番目以降はかぶらないようにしたい

Javascript初心者です。
[ ---- ]よりの上の部分だけ使って、ひとつ分だけランダム表示しています。

これを応用して、2.3番目も追加したいのだが、それらはかぶらないようにしたいです。


var jmp = new Array();
var img = new Array();

img[0] = 'img_URL_00';
img[1] = 'img_URL_01';
img[2] = 'img_URL_02';
img[3] = 'img_URL_03';
img[4] = 'img_URL_04';

jmp[0] = 'テキスト_00';
jmp[1] = 'テキスト_01';
jmp[2] = 'テキスト_02';
jmp[3] = 'テキスト_03';
jmp[4] = 'テキスト_04';

n = Math.floor(Math.random()*jmp.length);
// 【01】
document.write("<img src='"+img[n]+"' alt='"+jmp[n]+"' border='0'>")
document.write("<p>"+jmp[n]+"</p>");

-------------------------------------------------------------------

// 【02】 (【01】以外を表示したい)
document.write("<img src='"+img[n]+"' alt='"+jmp[n]+"' border='0'>")
document.write("<p>"+jmp[n]+"</p>");

// 【03】 (【01】と【02】以外を表示したい)
document.write("<img src='"+img[n]+"' alt='"+jmp[n]+"' border='0'>")
document.write("<p>"+jmp[n]+"</p>");

単純に追加してみたところ全て同じものが表示され、試しに【02】の[n]を[n+1]などにしてみたのですが、そうすると【01】で[4]が選択されると以降がエラーになってしまいました。

[n]がかぶらないように、かつ0-4以内で選択されるようにするにはどのようにすれば良いでしょうか。

宜しくお願い致します。

閲覧数:
23
回答数:
2
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

maj********さん

2019/5/2001:03:41

質問者さんのコードでは、nの値が固定されたままです。
nを毎回計算するスクリプトは以下です。

var jmp = new Array();
var img = new Array();

img[0] = 'img_URL_00';
img[1] = 'img_URL_01';
img[2] = 'img_URL_02';
img[3] = 'img_URL_03';
img[4] = 'img_URL_04';

jmp[0] = 'テキスト_00';
jmp[1] = 'テキスト_01';
jmp[2] = 'テキスト_02';
jmp[3] = 'テキスト_03';
jmp[4] = 'テキスト_04';

var ns=[];//使用済みのnリスト

for(var i=0;i<img.length;i++){
var n=Math.floor(Math.random()*img.length);//nを設定
while(ns.indexOf(n)>=0){
n=Math.floor(Math.random()*img.length);//未使用のnになるまでnを更新
}
document.write('<img src="'+img[n]+'" alt="'+jmp[n]+'" border="0">');
document.write('<p>'+jmp[n]+'</p>');

ns[i]=n;//nを使用済みリストに追加
}

  • 質問者

    tom********さん

    2019/5/2014:42:42

    回答ありがとうございます。少しアレンジしても問題なく表示されました。ありがとうございます。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/5/20 14:43:11

求めていた回答をいただけたのでベストアンサーとさせていただきます。

ベストアンサー以外の回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

ois********さん

2019/5/2013:21:15

リストから、
重複なしに複数回ランダムで選び出す場合は、
ふつうは splice() をつかって、
選び出した要素を元の配列から削除していくことで重複を防ぐ。

────────────────
/* 画像リスト */
var img = [
"img_URL_00",
"img_URL_01",
"img_URL_02",
"img_URL_03",
"img_URL_04"
];

/* ランダムに3つ選び出して表示 */
for( let i=0; i<3; i++ ){
// ランダム番号
let rand = Math.floor( Math.random()*img.length );
// 選ばれた要素をリストから抜き出す(削除)
let item = img.splice( rand, 1 );
// 抜き出した要素を表示
document.write( "<img alt='"+item[ 0 ]+"'><br>" );
}
────────────────


for() の中をもう少しシンプルに書くと、

────────────────
/* 画像リスト */
var img = [
"img_URL_00",
"img_URL_01",
"img_URL_02",
"img_URL_03",
"img_URL_04"
];

/* ランダムに3つ選び出して表示 */
for( let i=0; i<3; i++ ){
// リストからランダムに抜き出す(削除)
let item = img.splice( Math.floor( Math.random()*img.length ), 1 );
// 抜き出した要素を表示
document.write( "<img alt='"+item[ 0 ]+"'><br>" );
}
────────────────


念のため、
抜き出す回数がリストの長さを超えてしまうといけないから、
for() の中で、
リストが空っぽになったらループを抜けるようにしておく。

────────────────
/* 画像リスト */
var img = [
"img_URL_00",
"img_URL_01",
"img_URL_02",
"img_URL_03",
"img_URL_04"
];

/* ランダムに20こ選び出して表示 */
for( let i=0; i<20 && img.length; i++ ){
// リストからランダムに抜き出す(削除)
let item = img.splice( Math.floor( Math.random()*img.length ), 1 );
// 抜き出した要素を表示
document.write( "<img alt='"+item[ 0 ]+"'><br>" );
}
────────────────

↑20こ選び出そうとしても、
配列が空っぽになった時点でちゃんと終わってくれる。


あと、
質問のコードでは、
img と jmp を別々に扱っているけど、
img と jmp はセットで管理したいものだから、
「url」と「jmp」を連想配列でセットにして、
それを配列 img に入れて管理したほうがいい。

────────────────
/* 画像リスト */
var img = [
{ "url": "img_URL_00", "jmp": "テキスト_00" },
{ "url": "img_URL_01", "jmp": "テキスト_01" },
{ "url": "img_URL_02", "jmp": "テキスト_02" },
{ "url": "img_URL_03", "jmp": "テキスト_03" },
{ "url": "img_URL_04", "jmp": "テキスト_04" }
];

/* ランダムに3つ選び出して表示 */
for( let i=0; i<3 && img.length; i++ ){
// リストからランダムに抜き出す(削除)
let item = img.splice( Math.floor( Math.random()*img.length ), 1 );
// 抜き出した要素を表示
document.write( "<img src='"+item[ 0 ].url+"' alt='"+item[ 0 ].jmp+"' border='0'>" );
}
────────────────

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる