実現したいこと
表示されている項目の上にカーソルを持っていくと、その項目に対応した内容を、あらかじめ作成しておいた連想配列から選択して、id設定した箇所に表示させたい。
ここに実現したいことを箇条書きで書いてください。
1)メッセージは、表示項目のすぐ下に表示させたい。
2)HTMLでは、表示項目のすぐ下の行に<div id=〇〇>info</div>と書いておく。
3)JavaScript の関数としては、idと、連想配列のキーワードstr により、選択すべき内容を選択し、id
の場所に、表示させたい。
4)マウスアウトしたら、表示を消す。
5)連想配列の構造
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【 サンプル 】1</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【 サンプル 】2</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【 サンプル 】3</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を使用しています。
ここにより詳細な情報を記載してください。
はじめて質問させていただきました。
よろしくお願いいたします。
0 コメント