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

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

ただいまの
回答率

90.34%

  • JavaScript

    17608questions

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

  • HTML

    9626questions

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

htmlとjavascriptで等確率ランダム条件分岐で埋め込みリンク画像の表示

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,463
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2017/02/25 20:08 編集

    <script type="text/javascript" src="https://j.zucks.net.zimg.jp/j?f=189184 "></script> これが元のコードなのですが、これだけで正常に動作するので大丈夫だとは思うのですが,,,一応「http://jsfiddle.net/」こちらで動作確認しました。

    キャンセル

  • kei344

    2017/02/25 20:12

    元のコードと質問文に書かれているコードがかなり違いますが、どの情報を見たかを質問文に追記願います。また、http://jsfiddle.net/は保存しないと見れませんよ。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/02/25 20:24

    すみません。質問変更し直しました!もう一度お願いしたいです。 scriptを javascriptの後に閉じてしまうと画像が表示されないです。

    キャンセル

回答 3

+3

<script type="text/javascript"
rand = Math.floor(Math.random()*4);

if (rand == 0) src="https://j.zucks.net.zimg.jp/j?f=188499";
if (rand == 1) src="https://j.zucks.net.zimg.jp/j?f=189461";
if (rand == 2) src="https://j.zucks.net.zimg.jp/j?f=189462";
if (rand == 3) src="https://j.zucks.net.zimg.jp/j?f=189463";>
</script>


これは、たぶん、こんな感じで属性として解釈されています。

<script type="text/javascript"
rand="Math.floor(Math.random()*4);"
if="" 
(rand="="
0)=""
src="https://j.zucks.net.zimg.jp/j?f=188499"
;=""
if=""
(rand="="
1)=""
src="https://j.zucks.net.zimg.jp/j?f=189461"

...

>
</script>


後からかぶった属性は無視されますから、結局こうなります。

<script type="text/javascript"
rand="Math.floor(Math.random()*4);"
if="" 
(rand="="
0)=""
src="https://j.zucks.net.zimg.jp/j?f=188499"
;=""
1)=""
2)=""
3)=""
>
</script>


ここで有効な属性はtype``srcのみですから結局はこれと同じです。

<script type="text/javascript" src="https://j.zucks.net.zimg.jp/j?f=188499">
</script>


なので、最初のソースのスクリプトだけ実行され、決まった広告が出力されることになります。

つまり、ひとことで言うと「タグの内部にコードを書いちゃダメ」ということです。
 
 
 

 追記
<script type="text/javascript">
var rand = Math.floor(Math.random()*4);
var src;
if (rand == 0) src="https://j.zucks.net.zimg.jp/j?f=188499";
if (rand == 1) src="https://j.zucks.net.zimg.jp/j?f=189461";
if (rand == 2) src="https://j.zucks.net.zimg.jp/j?f=189462";
if (rand == 3) src="https://j.zucks.net.zimg.jp/j?f=189463";
document.write('<script src="'+src+'"><\/script>');
</script>


動作未確認。動いたとしてもお行儀の悪いコードです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/25 21:17

    あら、終わってた。

    キャンセル

  • 2017/02/25 21:22

    すみません!
    とてもわかりやすい解説ありがとうございます。
    もう誰も回答してもらえないと思って終わってしまいました…


    もし良かったらどのように変更したら良いか教えていただけないでしょうか??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>


    コレだと画像すら表示されない理由が分からないです@@;;

    キャンセル

  • 2017/02/25 21:22

    こんな解釈になるんですね。勉強になりました。

    質問と、やりたいことがマッチしてなかったみたいですね。

    キャンセル

  • 2017/02/25 21:25

    自分の質問が下手すぎるあまりに回答して頂いた方に理解して頂けてなかったんですね@@;;

    キャンセル

  • 2017/02/25 21:28

    srcは属性なので、タグの外に書いても有効にならないため表示されません。

    キャンセル

  • 2017/02/25 21:31

    ローテーションしたいのが、JavaScript ファイルなので、画像ファイルの前提で回答しても、うまく行っていない感じですね。

    キャンセル

  • 2017/02/25 21:35


    <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

    キャンセル

  • 2017/02/25 21:45

    追記しました。
    document.writeはお行儀が悪いので、本当はdocument.createElementを使った方がいいです。

    キャンセル

  • 2017/02/25 21:50

    わざわざコードまで書いて頂きありがとうございます!

    いま外出してますので、後で実装して見てまた連絡させて頂きます。
    よろしくお願いします!m(_ _)m

    キャンセル

  • 2017/02/25 22:06

    アフィリエイトで提供されるjavascriptのコードの話だったんですね^^;
    displayなどでの表示の切り替えでもいけそうですね。

    キャンセル

  • 2017/02/26 03:45

    夜分に失礼しますm(_ _)m

    Lhankorさん
    コード正常に動きました。とっても感動しました><
    document.writeのこのような使い方覚えておきます!
    '+src+'を調べてもどういう意味か分からなかったです。
    それと<\/script>の円マークの必要性も知りたいです!
    もし良かったら教えて頂けないでしょうか??

    kyuntanさん
    すみません、自分の質問の仕方が悪かったですm(_ _)m
    また機会があれば回答よろしくお願いします!(^O^)

    キャンセル

  • 2017/02/26 07:08

    ’文字列' + 変数srcに入っている文字列 + '文字列' となり
    <script src="https://j.zucks.net.zimg.jp/j?f=188499"></script> このようになり
    それをdocument.writeで書き込んでいるとなります。
    手で書いていた所をjavascriptで書き込んでいるわけです。

    キャンセル

  • 2017/02/26 08:35

    最初の質問からズレてしまっているのでどうかとも思うのですが、一応5秒ごとに広告表示を切り替えるコードを私の回答欄に追加しておきます。
    少しずつ頑張ってください^^

    キャンセル

  • 2017/02/26 15:56

    解説ありがとうございます!!!
    ’文字列' + 変数srcに入っている文字列 + '文字列'  覚えておきます!!m(_ _)m

    そして新しいコードありがとうございます^^
    コチラも使う場面がいつかありそうなので
    保存しておきます!!
    勉強頑張ります!!!
    また機会があれば回答よろしくお願いしますm(_ _)m

    キャンセル

checkベストアンサー

+2

こんな感じから始めてみてはどうでしょうか。
<boby>と</body>の中に入れてください。

    <img src="" id="img1" />

    <script type="text/javascript">
      let src;
      rand = Math.floor(Math.random()*4);
      if (rand == 0) {
      src="画像のパス1";
      }
      else if(rand == 1) {
      src="画像のパス2";
      }
      else if(rand == 2) {
      src="画像のパス3";
      }
      else if(rand == 3) {
      src="画像のパス4";
      }
      document.getElementById('img1').setAttribute("src",src);
    </script>

「追加」
5秒間隔で切り替え、今回は10回で終わらせています。
ランダムで同じ値が出た場合は考慮していません。

<!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 20:23

    すみません、こちらの質問があやふやでした。
    変更しましたので、もう一度お願いしたいです。m(_ _)m
    kyuntanさんのコードで実装した結果、画像が表示されなかったです。
    お手数ですがよろしくお願いします!

    キャンセル

  • 2017/02/25 20:36

    画像のパスの所にin4251679さんのサイトの画像のパスを設定してください。
    画像の場所にXが出ている場合はパスを間違えています。

    キャンセル

  • 2017/02/25 20:40

    画像のパスとは
    https://j.zucks.net.zimg.jp/j?f=188499
    のことであってますか??@@;;

    キャンセル

  • 2017/02/25 20:43

    https://j.zucks.net.zimg.jp/images/img01.jpg
    みたいな画像のパスです。

    キャンセル

  • 2017/02/25 20:47

    https://gyazo.com/94321bece927b50a9a140379c1bf697b
    このようにがぞうを設定しなくても
    https://j.zucks.net.zimg.jp/j?f=188499
    で設定されていると思うんですよね@@;;
    画像自体持っていないです・・

    キャンセル

  • 2017/02/25 20:54

    他のサイトのリンクによる画像の使用に関してはそちらのサイトに従ってください。
    javascriptの練習をするのであれば、自己サイトにアップしてそれを使った方がいいと思います。

    キャンセル

  • 2017/02/25 20:56

    わかりました!
    もう少し考えてみます。
    回答ありがとうございました!m(_ _)m

    キャンセル

+2

まさかとは思いますがコードを<script>の開始タグ内に書いてません?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/25 19:17

    元の一つの画像を表示させるコードが
    <script type="text/javascript" src="A"></script>
    となっているんですよね@@;
    それで
    <script type="text/javascript">
    このように閉じてしまうと画像すら現れなくなります。
    最後の</script>の直前で閉じたら画像は現れますが1つめのだけが現れて分岐されないんですm(_ _)m

    キャンセル

  • 2017/02/25 19:21

    <head>内に<script>でコードを書くとhtmlのロードが開始される前に実行されるので、window.onloadイベント後に実行しないと意味ないと思いますが。

    キャンセル

  • 2017/02/25 19:50 編集

    コードに触れたことがあまりなくて、初歩的なことが分かってなくてすみません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

    キャンセル

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

  • JavaScript

    17608questions

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

  • HTML

    9626questions

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