javascript ボタンで画像表示するプログラム

javascriptについて質問です。
ボタンを押すと隠れていた画像がボタン下に表示されるプログラムをdomで表示させたいです。
色々と調べて試してみたのですが、うまくいきません。
目的として、cssで非表示にしたものをjavascriptを用いてボタンを押すと表示という風に行いたいです。
途中まで記述してみました。
改善点を教えていだだけると助かります。
よろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問08</title>
<style>
	.towr{
		width:400px;
		height:200px;
		display:none;
	}
</style>
</head>

<body>
<p>ボタンを押すと隠れていた画像がボタン下に表示されるプログラム</p>
	<p><button onClick='btn()'>クリックして画像表示</button></p>
	<p id='img'></p>
	<img src='../img/towr.jpg' alt='' class='towr'>

<script>
	var img=document.getElementById('img');
	function btn(){
		img.src='../img/towr.jpg';
	}
</script>
</body>
</html>

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

回答1件

ベストアンサー

displayプロパティの設定をjavascriptで変更するには、styleオブジェクトのdisplayプロパティを用いることで実現できます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>問08</title>
6    <style>
7        .display {
8            display: none;
9        }
10    </style>
11</head>
12
13<body>
14<div class="display" id="display">
15    <img src="img/CxGC1pzUkAAMSld.jpg" alt="image">
16</div>
17<button onclick="btn()">クリック</button>
18
19<script>
20    var img = document.getElementById('display');
21    function btn() {
22        img.style.display = "block";
23    }
24</script>
25</body>
26</html>