Q&A
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「src」をどう使うかを書かなければ何がしたいかわかりません。
###前提・実現したいこと
htmlとjavascriptで等確率ランダム条件分岐で画像を表示させるシステムを作っています。
条件分岐の機能を実装しても一番最初の画像しか表示されないなくて困っています。
使用用途はブログに広告を貼りたいと考えています。広告会社から発行してもらうURLが「提供されているコード」です。
とても初歩的な質問ですがご教授よろしくお願いしますm(_ _)m
参考にしたページです。
http://www.shurey.com/js/samples/2_msg4.html
###提供されているコード
<script type="text/javascript" src="A"></script>
###該当のソースコード
<script type="text/javascript" rand = Math.floor(Math.random()*4); if (rand == 0) src="A"; if (rand == 1) src="B"; if (rand == 2) src="C"; if (rand == 3) src="D";> </script>
ご指摘ありがとうございます。使い方が分かりませんでしたm(_ _)m ブログに広告を貼りたいと考えています。それでランダムで画像リンクを表示させたいと思っていますm(_ _)m
「src」を画像に入れる箇所がスクリプト中にありません。また、最低限のHTMLも書かれたほうが良いです。
<script type="text/javascript" src="https://j.zucks.net.zimg.jp/j?f=189184 "></script> これが元のコードなのですが、これだけで正常に動作するので大丈夫だとは思うのですが，，，一応「http://jsfiddle.net/」こちらで動作確認しました。
元のコードと質問文に書かれているコードがかなり違いますが、どの情報を見たかを質問文に追記願います。また、http://jsfiddle.net/は保存しないと見れませんよ。
すみません。質問変更し直しました！もう一度お願いしたいです。 scriptを javascriptの後に閉じてしまうと画像が表示されないです。
回答3件
0
HTML
1<script type="text/javascript" 2rand = Math.floor(Math.random()*4); 3 4if (rand == 0) src="https://j.zucks.net.zimg.jp/j?f=188499"; 5if (rand == 1) src="https://j.zucks.net.zimg.jp/j?f=189461"; 6if (rand == 2) src="https://j.zucks.net.zimg.jp/j?f=189462"; 7if (rand == 3) src="https://j.zucks.net.zimg.jp/j?f=189463";> 8</script>
これは、たぶん、こんな感じで属性として解釈されています。
HTML
1<script type="text/javascript" 2rand="Math.floor(Math.random()*4);" 3if="" 4(rand="=" 50)="" 6src="https://j.zucks.net.zimg.jp/j?f=188499" 7;="" 8if="" 9(rand="=" 101)="" 11src="https://j.zucks.net.zimg.jp/j?f=189461" 12 13... 14 15> 16</script>
後からかぶった属性は無視されますから、結局こうなります。
HTML
1<script type="text/javascript" 2rand="Math.floor(Math.random()*4);" 3if="" 4(rand="=" 50)="" 6src="https://j.zucks.net.zimg.jp/j?f=188499" 7;="" 81)="" 92)="" 103)="" 11> 12</script>
ここで有効な属性はtype``srcのみですから結局はこれと同じです。
HTML
1<script type="text/javascript" src="https://j.zucks.net.zimg.jp/j?f=188499"> 2</script>
なので、最初のソースのスクリプトだけ実行され、決まった広告が出力されることになります。
つまり、ひとことで言うと「タグの内部にコードを書いちゃダメ」ということです。
追記
javascript
1<script type="text/javascript"> 2var rand = Math.floor(Math.random()*4); 3var src; 4if (rand == 0) src="https://j.zucks.net.zimg.jp/j?f=188499"; 5if (rand == 1) src="https://j.zucks.net.zimg.jp/j?f=189461"; 6if (rand == 2) src="https://j.zucks.net.zimg.jp/j?f=189462"; 7if (rand == 3) src="https://j.zucks.net.zimg.jp/j?f=189463"; 8document.write('<script src="'+src+'"><\/script>'); 9</script>
動作未確認。動いたとしてもお行儀の悪いコードです。
投稿2017/02/25 12:15
編集2017/02/25 12:43
総合スコア36078
あら、終わってた。
すみません！
とてもわかりやすい解説ありがとうございます。
もう誰も回答してもらえないと思って終わってしまいました…
もし良かったらどのように変更したら良いか教えていただけないでしょうか？？m(_ _)m
<script type="text/javascript">
rand = Math.floor(Math.random()*4);
if (rand == 0) src="A";
if (rand == 1) src="B";
if (rand == 2) src="C";
if (rand == 3) src="D";
</script>
コレだと画像すら表示されない理由が分からないです＠＠；；
こんな解釈になるんですね。勉強になりました。
質問と、やりたいことがマッチしてなかったみたいですね。
自分の質問が下手すぎるあまりに回答して頂いた方に理解して頂けてなかったんですね＠＠；；
srcは属性なので、タグの外に書いても有効にならないため表示されません。
ローテーションしたいのが、JavaScript ファイルなので、画像ファイルの前提で回答しても、うまく行っていない感じですね。
<script type="text/javascript">
rand = Math.floor(Math.random()*4);
if (rand == 0) {
<src="https://j.zucks.net.zimg.jp/j?f=188499";>
}
else if(rand == 1) {
<src="https://j.zucks.net.zimg.jp/j?f=189462";>
}
else if(rand == 2) {
<src="https://j.zucks.net.zimg.jp/j?f=189461";>
}
else if(rand == 3) {
< src="https://j.zucks.net.zimg.jp/j?f=189463";>
}
</script>
このように書いてみたのですが
表示されなかったです・・・m(_ _)m
自分がどこの部分を理解していないのかわからないので
何を理解すればこのコードがうまく書けるか教えてほしいですm(_ _)m
追記しました。
document.writeはお行儀が悪いので、本当はdocument.createElementを使った方がいいです。
わざわざコードまで書いて頂きありがとうございます！
いま外出してますので、後で実装して見てまた連絡させて頂きます。
よろしくお願いします！m(_ _)m
アフィリエイトで提供されるjavascriptのコードの話だったんですね＾＾；
displayなどでの表示の切り替えでもいけそうですね。
夜分に失礼しますm(_ _)m
Lhankorさん
コード正常に動きました。とっても感動しました＞＜
document.writeのこのような使い方覚えておきます！
'+src+'を調べてもどういう意味か分からなかったです。
それと<\/script>の円マークの必要性も知りたいです！
もし良かったら教えて頂けないでしょうか？？
kyuntanさん
すみません、自分の質問の仕方が悪かったですm(_ _)m
また機会があれば回答よろしくお願いします！(^O^)
’文字列' + 変数srcに入っている文字列 + '文字列' となり
<script src="https://j.zucks.net.zimg.jp/j?f=188499"></script> このようになり
それをdocument.writeで書き込んでいるとなります。
手で書いていた所をjavascriptで書き込んでいるわけです。
最初の質問からズレてしまっているのでどうかとも思うのですが、一応５秒ごとに広告表示を切り替えるコードを私の回答欄に追加しておきます。
少しずつ頑張ってください＾＾
解説ありがとうございます！！！
’文字列' + 変数srcに入っている文字列 + '文字列' 覚えておきます！！m(_ _)m
そして新しいコードありがとうございます＾＾
コチラも使う場面がいつかありそうなので
保存しておきます！！
勉強頑張ります！！！
また機会があれば回答よろしくお願いしますm(_ _)m
0
ベストアンサー
こんな感じから始めてみてはどうでしょうか。
<boby>と</body>の中に入れてください。
<img src="" id="img1" /> <script type="text/javascript"> let src; rand = Math.floor(Math.random()*4); if (rand == 0) { src="画像のパス１"; } else if(rand == 1) { src="画像のパス２"; } else if(rand == 2) { src="画像のパス３"; } else if(rand == 3) { src="画像のパス４"; } document.getElementById('img1').setAttribute("src",src); </script>
「追加」
５秒間隔で切り替え、今回は１０回で終わらせています。
ランダムで同じ値が出た場合は考慮していません。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <title></title> <style media="screen"> .cm_group { display: block; } </style> </head> <body> <div class="cm"> <div id="cm1" class="cm_group"> <script src="https://j.zucks.net.zimg.jp/j?f=188499"></script> </div> <div id="cm2" class="cm_group"> <script src="https://j.zucks.net.zimg.jp/j?f=189462"></script> </div> <div id="cm3" class="cm_group"> <script src="https://j.zucks.net.zimg.jp/j?f=189461"></script> </div> <div id="cm4" class="cm_group"> <script src="https://j.zucks.net.zimg.jp/j?f=189463"></script> </div> </div> <script type="text/javascript"> var showCnt = 0; function changeCM(){ var cmCurrent = Math.floor(Math.random() * 4); var lengthGroup = lengthGroup = $('.cm_group').length; var i; for(i=0; i<lengthGroup; ++i){ var objEq = $('.cm_group').eq(i); if(i == cmCurrent){ objEq.css('display','block'); }else{ objEq.css('display','none'); } } } function showCM(){ changeCM(); showCnt++; console.log(showCnt); var tid = setTimeout(function(){ showCM(); },5000); if(showCnt > 9){ clearTimeout(tid); console.log("end!"); } } showCM(); </script> </body> </html>
一から説明はできないので分からない所は別に質問を立てられれば、色々なやり方を提示して頂けるかもしれません。
投稿2017/02/25 11:11
編集2017/02/25 23:50総合スコア350
すみません、こちらの質問があやふやでした。
変更しましたので、もう一度お願いしたいです。m(_ _)m
kyuntanさんのコードで実装した結果、画像が表示されなかったです。
お手数ですがよろしくお願いします！
画像のパスの所にin4251679さんのサイトの画像のパスを設定してください。
画像の場所にXが出ている場合はパスを間違えています。
画像のパスとは
https://j.zucks.net.zimg.jp/j?f=188499
のことであってますか？？＠＠；；
https://j.zucks.net.zimg.jp/images/img01.jpg
みたいな画像のパスです。
https://gyazo.com/94321bece927b50a9a140379c1bf697b
このようにがぞうを設定しなくても
https://j.zucks.net.zimg.jp/j?f=188499
で設定されていると思うんですよね＠＠；；
画像自体持っていないです･･
他のサイトのリンクによる画像の使用に関してはそちらのサイトに従ってください。
javascriptの練習をするのであれば、自己サイトにアップしてそれを使った方がいいと思います。
わかりました！
もう少し考えてみます。
回答ありがとうございました！m(_ _)m
0
まさかとは思いますがコードを<script>の開始タグ内に書いてません？
投稿2017/02/25 10:14
総合スコア4267
元の一つの画像を表示させるコードが
<script type="text/javascript" src="A"></script>
となっているんですよね＠＠；
それで
<script type="text/javascript">
このように閉じてしまうと画像すら現れなくなります。
最後の</script>の直前で閉じたら画像は現れますが１つめのだけが現れて分岐されないんですm(_ _)m
<head>内に<script>でコードを書くとhtmlのロードが開始される前に実行されるので、window.onloadイベント後に実行しないと意味ないと思いますが。
コードに触れたことがあまりなくて、初歩的なことが分かってなくてすみませんm(_ _)m
参考にしたページでは
<script type="text/javascript">
rand = Math.floor(Math.random()*5);
if (rand == 0) msg = "大吉";
if (rand == 1) msg = "中吉";
if (rand == 2) msg = "吉";
if (rand == 3) msg = "凶";
if (rand == 4) msg = "大凶";
document.write(msg);
</script>
このコードでどれかがおみくじがランダムに表示されるんですよね。
それを真似て
<script type="text/javascript">
rand = Math.floor(Math.random()*4);
if (rand == 0) src="A";
if (rand == 1) src="B";
if (rand == 2) src="C";
if (rand == 3) src="D";
</script>
このように書きましたら画像が表示されなくなりました。
それで
<script type="text/javascript"
rand = Math.floor(Math.random()*4);
if (rand == 0) src="A";
if (rand == 1) src="B";
if (rand == 2) src="C";
if (rand == 3) src="D";
> </script>
のように閉じる位置を変えたら何回してもAだけが表示されました。
どの部分をどのように変更したら画像がランダムで表示されるか教えていただきたいですm(_ _)m
あなたの回答
tips
プレビュー
