配列を使って、画像がランダムに変わるようにしたいです。

###前提・実現したいこと
配列を使って、ロード時、hoverDivにマウスオーバー時に、randomImgの画像がランダムに表示されるようにしたいです。

###発生している問題・エラーメッセージ
●hover area!!の表示が消えてしまう。

●return changePhoto(n);とすると、エラーが表示され、画像がたくさん表示される

エラーメッセージ
Maximum call stack size exceeded

###該当のソースコード

<body>
<div id="hoverDiv" onmouseover="overPhoto();">
hover area!!
<!-- hoverDiv --></div>

<div id="randomImg" onmouseover="changePhoto();">
<!-- randomImg --></div>
</body>

var myPhoto=new Array(10);
myPhoto[0]="images/photo1.jpg";
myPhoto[1]="images/photo2.jpg";
myPhoto[2]="images/photo3.jpg";
myPhoto[3]="images/photo4.jpg";
myPhoto[4]="images/photo5.jpg";
myPhoto[5]="images/photo6.jpg";
myPhoto[6]="images/photo7.jpg";
myPhoto[7]="images/photo8.jpg";
myPhoto[8]="images/photo9.jpg";
myPhoto[9]="images/photo10.jpg";


function changePhoto(n){
	n = Math.floor(Math.random()*myPhoto.length);
	document.write("<img src='"+myPhoto[n]+"' border='0'>");
	return changePhoto;
}


function overPhoto() {
	changePhoto();
}

###試したこと
return changePhoto(n);とすると、エラーがでてしまいます。
return changePhoto;ではエラーは出ませんが、変化もありません。

###補足情報(言語/FW/ツール等のバージョンなど)

kei344

2017/04/07 08:33

質問タグに「JavaScript」を追加されたほうが回答を得やすいと思います。また、質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yambejp

2017/04/07 11:44

hoverDivにhoverするとどこの画像がかわる？もしくは追加される？のでしょうか？少なくともdocument.write()はありえないと思いますしreturnで自分自身を再帰的に読むのもNGだと思います

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

回答2件

すでに解決済みですが、以下のようにも行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        img {
13            border-width: 0;
14        }
15
16        #hoverDiv {
17            width: 200px;
18            height: 200px;
19            background-color: #ff8ed0;
20        }
21    </style>
22</head>
23<body>
24<div id="hoverDiv" onmouseover="changePhoto();">
25    hover area!!
26</div>
27<div id="randomImg" onmouseover="changePhoto();"></div>
28<script>
29    let myPhoto = [];
30    document.addEventListener("DOMContentLoaded", function () {
31        for (let i = 0; i < 10; i++) {
32            myPhoto.unshift("https://placehold.jp/3d4070/ffffff/150x150.png?text=photo" + (i + 1) + ".jpg");
33        }
34        for (let i = 0; i < document.querySelectorAll("#hoverDiv, #randomImg").length; i++) {
35            document.querySelectorAll("#hoverDiv, #randomImg")[i].addEventListener("mouseover", function () {
36                let n = Math.floor(Math.random() * myPhoto.length);
37                document.getElementById("randomImg").innerHTML = "<img src='" + myPhoto[n] + "'>";
38            }, false);
39        }
40    }, false);
41</script>
42</body>
43</html>

投稿2017/04/07 13:02

s8_chu

総合スコア14731

ベストアンサー

ベテランの回答者の指摘が上手く伝わっていないようですけど。。。

    <div id="randomImg" onmouseover="changePhoto();">
      <img id="img01" src="" alt="">
    <!-- randomImg --></div>

function changePhoto(){
    n = Math.floor(Math.random()*myPhoto.length);
    var elem = document.getElementById('img01');
    elem.setAttribute('src',myPhoto[n])
}

投稿2017/04/07 12:25