JavascriptかjQueryで、HTMLの表示に、JSの配列をランダムに入れる方法

バイラルで人気になっていた、こちらを真似したプログラムを作っています。
http://www.copywriter.co.jp/copyslot/

htmlの値（文字が書かれている）に、jsの配列の値をランダムに入れたいです。

下記でいうと、HTMLのid box1 box2 box3に、copyの配列をランダムに表示させるようにしたいです。

jsの、copy[putCopy]を
box1,box2,box3に表示させたいです。

copyの配列も今は、少ないですが、１００個とかになったとき大変なのでhtmlにテキスト表示させるだけでなく、変数を入れたいのですが、どうしたらいいでしょうか。

$ is not defined と出るので、書式も違うようです。

$(function(){
   'use strict';

   var box1 = document.getElementById('box1');
   var box2 = document.getElementById('box2');
   var box3 = document.getElementById('box3');
   var copy =["新しい","朝が来た","すごい","ボス","そんな",];
   var putCopy = copy[Math.floor(Math.random() * copy.length)];





//クリックされた時の動作を定義
 $('#box1').click(function(){
  $('#box1').html("？？？？あってる？？？")

  });
});

<!DOCTIPE html>
<html lang ="ja">
<head>
<meta charset ="utf-8">
<title>コピースロット</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" src="script.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


</head>

<body>
  <!---後で画像入れる ↓--->
 <h1>コピースロット</h1>

<ul>
<li class="box" id="box1">そうだ</li>
<li class="box" id="box2">このろくでもない</li>
<li class="box" id="box3">これが日本だ</li>
</ul>


</body>
</html>

行動規範の内容に同意します

回答4件

まず、

$ is not defined と出るので、書式も違うようです。

これはjQueryを読み込む前にスクリプトを使用しているからですね。
正しくは以下の様に。

html
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
2<script type="text/javascript" src="script.js"></script>

要するに、jQueryで定義している $ という関数がありませんよ、と言っています。

JavaScript部分はこうかな？

javascript
1var copy = ['新しい', '朝が来た', 'すごい', 'ボス', 'そんな'];
2
3$('ul > li').click(function(event) {
4    var random_index = Math.floor(Math.random() * copy.length);
5    $(this).html(copy[random_index]);
6});

投稿2016/03/01 05:42

moeru_gomi

総合スコア42

masaakitsuyoshi

2016/03/01 05:51

行動規範の内容に同意します

クリックしたタイミングでランダム値を生成。
その番号を元に配列から文字を取り出す
取り出した文字を適用

という手順を踏む必要があります。
なので、ロード時に1回だけランダム生成を実行するだけのコードでは動いてくれません。
毎回ランダム値を生成できるように、その部分を関数化して繰り返し実行させています。

JavaScript
1var randomDisplay = function() {
2  this.init();
3};
4
5randomDisplay.prototype = {
6  init: function() {
7    this.$box = $('.box');
8    this.copy = ["新しい", "朝が来た", "すごい", "ボス", "そんな", ];
9    this.bindEvent();
10  },
11  bindEvent: function() {
12    var _self = this;
13
14    this.$box.on('click', function(e) {
15      _self.displayRandomText(this);
16    });
17  },
18  displayRandomText: function(box) {
19    var $targetBox = $(box),
20        randomText = this.getRandomText();
21    
22    $targetBox.text(randomText);
23  },
24  getRandomText: function() {
25    var num = Math.floor(Math.random() * this.copy.length);
26    
27    return this.copy[num];
28  }
29};
30
31$(function() {
32 new randomDisplay();
33});

投稿2016/03/01 05:36

編集2016/03/06 07:25

yamato_hikawa

総合スコア2092

masaakitsuyoshi

2016/03/01 05:52

クリックしたタイミングでランダム値を生成。その番号を元に配列から文字を取り出す取り出した文字を適用という手順を踏む必要があります。なので、ロード時に1回だけランダム生成を実行ようなコードでは動いてくれません。段階を踏まないといけないのですね。関数の部分は、まだ習いたてのため少し難しいですが、調べながらやってみます！

行動規範の内容に同意します

ベストアンサー

まず外部JSより先にJQueryを読み込んどきましょう。

んで、クリックイベントは

javascript
1//クリックされた時の動作を定義
2 $('.box').click(function(){
3  $(this).html(copy[Math.floor(Math.random() * copy.length)]);
4  });

こんな感じで想定の動きしてます？

投稿2016/03/01 05:35

tkturbo

総合スコア5572

masaakitsuyoshi

2016/03/01 05:56 編集

＞＞まず外部JSより先にJQueryを読み込んどきましょう。はい！目からウロコでした。。。＞＞こんな感じで想定の動きしてます？あ、それです多分！ boxがクリックされた時に、クリックされたboxに対して、 copy[putCopy]の値を表示させたかったです。 $(セレクタ).html(関数); でもいけるんですね！html('文章') 文章しか書けないのかと思っていました。

tkturbo

2016/03/01 06:06

ちなみに「copy」はmasaakitsuyoshiさん自身が宣言している変数で、中身は文字列の配列。「copy」の後ろの「[」「]」でくくられた中身は配列のx番目の文字列を取ってくるための添え字。よって「html(関数)」ではなく「html(文字列)」の形式ですよー。

masaakitsuyoshi

2016/03/01 06:13

＞＞html(文字列)の形式なるほど！とてもわかりやすいです！

masaakitsuyoshi

2016/03/01 06:18

ちなみに、tkturboさんのスクリプトだと、毎回クリックするたび変わるのですが、下記私が書いたスクリプトだと、クリックした時の一度しか文字が変わらないのはなぜなのでしょうか。 putCopyをランダムな数字を表示するメソッド？に、 htmlの中身を copy[putCopy] にしています。ーーーーーーー var copy =["新しい","朝が来た","すごい","ボス","そんな",]; var putCopy = Math.floor(Math.random() * copy.length); //クリックされた時の動作を定義 $('.box').click(function(){ $(this).html(copy[putCopy]); }); ーーーーーーー

行動規範の内容に同意します

まず、script.jsを読み込む前に、jQuery.min.jsが読み込まれるように、<script>タグの順番を入れ替えてみたら良いと思います。

それと、ページをロードした時にスクリプトが実行されるようにする場合、次のように書きます。

JavaScript
1$(document).ready(function() {
2  // ロード時に実行したい処理を記述
3});

いかがでしょうか。

投稿2016/03/01 05:31

編集2016/03/01 05:34

tkanda

総合スコア2425

masaakitsuyoshi

2016/03/01 05:58

＞＞まず、script.jsを読み込む前に、jQuery.min.jsが読み込まれるように、<script>タグの順番を入れ替えてみたら良いと思います。 bodyタグの終わりの直前に入れるのがいいようですね！改めて知りました。 $(document).ready(function() { // ロード時に実行したい処理を記述 }); 書いていただいたコードの省略形が下のやつのようですね。改めて知りました！ $(function( ) { //ロードしたい処理を記述 });

行動規範の内容に同意します

あなたの回答