実現したいこと

表示されている項目の上にカーソルを持っていくと、その項目に対応した内容を、あらかじめ作成しておいた連想配列から選択して、id設定した箇所に表示させたい。

ここに実現したいことを箇条書きで書いてください。

▲▲機能を動作するようにする

１）メッセージは、表示項目のすぐ下に表示させたい。
２）HTMLでは、表示項目のすぐ下の行に<div id=〇〇>info</div>と書いておく。
３）JavaScript の関数としては、idと、連想配列のキーワードstr　により、選択すべき内容を選択し、id
の場所に、表示させたい。
４）マウスアウトしたら、表示を消す。
５）連想配列の構造
infoAry={
a: "あいうえお",
b: "かきくけこ",
.
.
}

前提

ここに質問の内容を詳しく書いてください。

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

下記のコードで実施したら、マウスオーバー時に、『undefined』とエラー表示されてしまい、ました。

エラーメッセージ
undefined

### ソースコード

<meta charset="UTF-8"><script type="text/javascript">

const infoAry = {
a:'本サイトのトップページです。',
b:'JavaScriptの基本的な書き方のサンプルを紹介しています。',
c:'JavaScriptの便利な書き方のサンプルを紹介しています。',
d:'JavaScriptの数字関連の書き方のサンプルを紹介しています。'
};

function mOver(obj,str) {
    document.getElementById(obj).innerHTML = infoAry.str;	
    document.getElementById(obj).style.visibility = "visible";
}
	
function mOut(obj) {
    document.getElementById(obj).style.visibility = "hidden";
}
</script>

<p onmouseover="mOver('info0','a')" onmouseout="mOut('info0')">プログラマカレッジ</p>
<div id="info0" style="position:absolute; visibility:hidden; font-size:1.5em; background-color:#FFFFFF; border-style:ridge;">info</div> 

<p onmouseover="mOver('info1','b')" onmouseout="mOut('info1')">JavaScript【 サンプル 】１</p>
<div id="info1" style="position:absolute; visibility:hidden; font-size:1.5em; background-color:#FFFFFF; border-style:ridge;">info</div> 

<p onmouseover="mOver('info2','c')" onmouseout="mOut('info2')">JavaScript【 サンプル 】２</p>
<div id="info2" style="position:absolute; visibility:hidden; font-size:1.5em; background-color:#FFFFFF; border-style:ridge;">info</div> 

<p onmouseover="mOver('info3','d')" onmouseout="mOut('info3')">JavaScript【 サンプル 】３</p>
<div id="info3" style="position:absolute; visibility:hidden; font-size:1.5em; background-color:#FFFFFF; border-style:ridge;">info</div>

```ここに言語名を入力
JavaScript
ソースコード

試したこと

ここに問題に対して試したことを記載してください。

conosole.log(infoAry.a)を打つと、『本サイトのトップページです。』とちゃんと表示されますが、web上では、『undefined』となって、''　とか　 "" 　とか、いろいろいじったのですが、認識されませんでした。

補足情報（FW/ツールのバージョンなど）

Windows10, VisualStudioCodeを使用しています。

ここにより詳細な情報を記載してください。

はじめて質問させていただきました。
よろしくお願いいたします。

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

回答1件

ベストアンサー

javascript
1infoAry.str
2↓↓↓
3infoAry[str]

参考

hover処理はcssの方が楽かもしれません

css
1<style>
2.hover:not(:hover) + div{
3display:none;
4}
5.hover:hover + div{
6position:absolute;
7font-size:1.5em;
8background-color:#FFFFFF;
9border-style:ridge;
10}
11</style>
12<p class="hover">プログラマカレッジ</p><div>本サイトのトップページです。</div>
13<p class="hover">JavaScript【 サンプル 】１</p><div>JavaScriptの基本的な書き方のサンプルを紹介しています。</div>
14<p class="hover">JavaScript【 サンプル 】２</p><div>JavaScriptの便利な書き方のサンプルを紹介しています。</div>
15<p class="hover">JavaScript【 サンプル 】３</p><div>JavaScriptの数字関連の書き方のサンプルを紹介しています。</div>