前提・実現したいこと

マウスオーバーを使って画像と文字を出したいです。

ボタン上にカーソルを持っていくとしたのようなエラーコードが出てしまいます...
わからないところは、function change(){が間違えていると思うんですけど正しくonmouseoverを作動させるにはどうすれば良いですか？よろしくお願いします。
例えばAさんにカーソルを合わせるとAさんの名前とAさんの写真、Bさんにカーソルを合わせるとBさんの名前とBさんの写真といった感じで、名前とイメージに入れてある写真がでるようにしたいです。
初めての質問なので間違っていたらごめんなさい(;^ω^)

発生している問題・エラーメッセージ

エラーはないですけどカーソルをボタンの上に持っていったらAさんBさんCさん・・・と全部表示されてしまっている状態です...

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMを使って文字や画像の変更</title>

<script>
var imgFile= [];//画像ファイル 配列
imgFile[0]="images/img1.jpg";←はAさんの写真です
imgFile[1]="images/img2.jpg";←はBさんの写真です
imgFile[2]="images/img3.jpg";←はCさんの写真です
imgFile[3]="images/img4.jpg";←はDさんの写真です
imgFile[4]="images/img5.jpg";←はEさんの写真です
var nameFile= [];//文字 配列
nameFile[0]="Aさん";
nameFile[1]="Bさん";
nameFile[2]="Cさん";
nameFile[3]="Dさん";
nameFile[4]="Eさん";
function change(){
var myArea = document.getElementById("myArea");
myArea.innerHTML = imgFile.toString()+nameFile.toString();
}
</script>
</head>
<body>
<div id="myArea"></div>
<input type="button" value="Aさん" onmouseover="change()">
<input type="button" value="Bさん" onmouseover="change()">
<input type="button" value="Cさん" onmouseover="change()">
<input type="button" value="Dさん" onmouseover="change()">
<input type="button" value="Eさん" onmouseover="change()">

</body>
</html>

yasutomi

2019/07/26 11:16

質問タイトルに「何が」動作しないのか書かないとダメです。 > うまく作動しないです...

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

回答4件

ベストアンサー

getElementByidやgetElementByI
↓↓↓
getElementById

ソースにはmyAreaというidをもったHTML要素もないので無理
innerHTMLへのデータ投入の箇所も書式がおかしくて意味不明な状況

調整

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>DOMを使って文字や画像の変更</title>
6
7<script>
8var imgFile= [];//画像ファイル 配列
9imgFile[0]="images/img1.jpg";
10imgFile[1]="images/img2.jpg";
11imgFile[2]="images/img3.jpg";
12imgFile[3]="images/img4.jpg";
13imgFile[4]="images/img5.jpg";
14var nameFile= [];//文字 配列
15nameFile[0]="Aさん";
16nameFile[1]="Bさん";
17nameFile[2]="Cさん";
18nameFile[3]="Cさん";
19nameFile[4]="Dさん";
20function change(num){
21var myArea = document.getElementById("myArea");
22myArea.innerHTML = imgFile[num]+nameFile[num];
23}
24</script>
25</head>
26<body>
27<div id="myArea"></div>
28<input type="button" value="Aさん" onmouseover="change(0)">
29<input type="button" value="Bさん" onmouseover="change(1)">
30<input type="button" value="Cさん" onmouseover="change(2)">
31<input type="button" value="Dさん" onmouseover="change(3)">
32<input type="button" value="Eさん" onmouseover="change(4)">
33</body>
34</html>

画像表示

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>DOMを使って文字や画像の変更</title>
6<script>
7var imgFile= [];//画像ファイル 配列
8imgFile[0]="images/img1.jpg";
9imgFile[1]="images/img2.jpg";
10imgFile[2]="images/img3.jpg";
11imgFile[3]="images/img4.jpg";
12imgFile[4]="images/img5.jpg";
13var nameFile= [];//文字 配列
14nameFile[0]="Aさん";
15nameFile[1]="Bさん";
16nameFile[2]="Cさん";
17nameFile[3]="Cさん";
18nameFile[4]="Dさん";
19function change(num){
20  var myArea = document.getElementById("myArea");
21  var img=imgFile[num];
22  var name=nameFile[num];
23  console.log(img);
24  myArea.innerHTML = `<img src="${img}" width="100" height="100" alt="${img}">${name}`;
25}
26</script>
27</head>
28<body>
29<input type="button" value="Aさん" onmouseover="change(0)">
30<input type="button" value="Bさん" onmouseover="change(1)">
31<input type="button" value="Cさん" onmouseover="change(2)">
32<input type="button" value="Dさん" onmouseover="change(3)">
33<input type="button" value="Eさん" onmouseover="change(4)">
34<div id="myArea"></div>
35</body>
36</html>

投稿2019/07/26 09:52

編集2019/07/26 11:20

yambejp

総合スコア114915

nubba

2019/07/26 10:04

文章訂正しました！ Javascriptを触り始めて日が浅いので理解しきれていませんでした。ごめんなさい...

yambejp

2019/07/26 10:06

今のソースの流れから buttonにマウスを乗せる→change()が実行される→myAreaというidの領域を探す→そんなところ無いのでそのinnerHTMLをいじろうとしてエラーという感じです

nubba

2019/07/26 10:23

解説ありがとうございます！

yambejp

2019/07/26 10:31

だいたい形が見えてきたので、調整版を追記しておきましたご希望の結果と違う場合は具体的に想定される動作を説明ください

nubba

2019/07/26 11:09

ありがとうございます！コードをうってからカーソルを合わせるとimages/img1.jpgAさんとなります。希望の結果内容は「[Aさんの写真]とAさん」となるようにしたいです...

yambejp

2019/07/26 11:20

画像を表示するバージョンを追記しました

nubba

2019/07/26 11:32

ありがとうございます！とても助かりました!!

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

getElementByIdの件は既に回答が出ていますが、
エラーはgetElementByidとIが小文字のため、エラーになっている気がしますが
コード内だとgetElementByIとなりdが抜けてます。どちらが正しいのでしょう

それとHTML内にmyAreaというIDの要素が存在しません。

投稿2019/07/26 09:58

mepon

総合スコア480

nubba

2019/07/26 10:24

他の方にもご指摘して頂いたので修正しました！

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

いくつかおかしな点があります。質問する際に、コードを写し間違えていませんか？

javascript
1var myArea = document.getElementByI("myArea");

getElementById ではないですか？
それと、"myArea"というIDを持つ要素が無いように見えます。

javascript
1myArea.innerHTML = imgFile[],nameFile[];

文法的におかしいようですが、ここは何を意図しているのでしょうか？

javascript
1myArea.innerHTML = imgFile.toString()+nameFile.toString();

こうしたら、とりあえずエラーは出ないと思いますが、やりたいことと同じかどうかは分かりません。

投稿2019/07/26 10:00

alg

総合スコア2019

nubba

2019/07/26 10:09

よくわからないことを書いてしまっていてごめんなさい...

alg

2019/07/26 10:14 編集

コードを修正されたようですが、"myArea"というIDを持つ要素が無いままなので、まだエラーになります。body内のどこかに<div id="myArea"></div>と書いたら、とりあえずエラーにはならないと思いますよ。

nubba

2019/07/26 10:15

指摘して頂いたコードに修正しました！

alg

2019/07/26 10:17 編集

よくわからないことを書いてしまうのは、学習初期には当然だと思います。Q&Aサイトに質問する際は、自分が何をやろうとしているか＆どこまでできていてどこからができていないのか、を説明することをお勧めします。

nubba

2019/07/26 10:25

すいませんでした... 質問の際は、自分が何をやろうとしているか＆どこまでできていてどこからができていないのかをきちんと書くようにします！

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

JS
1document.getElementByI("myArea");

じゃなく

JS
1document.getElementById("myArea");

投稿2019/07/26 09:49

yamato_user

総合スコア2321

nubba

2019/07/26 10:00 編集

文章訂正しました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

うまく作動しないです...

前提・実現したいこと

発生している問題・エラーメッセージ

該当のソースコード

調整

画像表示

関連した質問