※ ChatGPTを利用し、要約された質問です(原文:クリックして画像を表示JavaScriptについて)
クリックして画像を表示JavaScriptについて
このQ&Aのポイント
JavaScriptを使用してボタンをクリックすると画像が表示されるプログラムを作成していますが、なぜか画像が表示されません。
コード内の設定が正しくないため、ボタンをクリックしても画像が表示されません。
画像のパスや要素のIDが正しく指定されていないため、画像が表示されません。
クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。
ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box"><!--attr (DOMのsetAttributeと同じ)-->
<script>
addEventListener("load",()=>{
document.getElementById("btn").addEventListener("click",()=>{
//$("img").attr("src","./image.jpg");
document.getElementById("aa").style.color = "white";
document.getElementById("img").style.backgroundImage = "./image.jpg";
});
});
</script>
<button id="btn">ここをクリックで画像表示</button>
<p id="aa">aa</p>
<img id="img">
</div>
</body>
</html>
なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか?教えて頂きたく思います。