シンプルな JavaScript フォト ギャラリーを作成しようとしています。最初に、HTML で使用したい画像のサムネイルを使用しました。HTMLはこんな感じ
<div id="imgs">
<img onClick="gallery()" src="images/photo25thumbnail.jpg">
<img onClick="gallery()" src="images/photo43thumbnail.jpg">
<img onClick="gallery()" src="images/photo46thumbnail.jpg">
<img onClick="gallery()" src="images/photo47thumbnail.jpg">
<img onClick="gallery()" src="images/photo61thumbnail.jpg">
</div>
<div id="display">
<div>
</body>
</html>
そのため、ユーザーが画像をクリックすると、関数ギャラリーがトリガーされます。ここに私のJavaScriptコードがあります
function gallery()
{
var img1 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo25.jpg'></a>";
var img2 = document.getElementById("display")
.innerHTML ="<a href='#'><img src='images/photo43.jpg'></a>";
var img3 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo46.jpg'></a>";
var img4 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo47.jpg'></a>";
var img5 = document.getElementById("display")
.innerHTML="<a href='#'><img src='images/photo61.jpg'></a>";
}
しかし、何らかの理由で画像の 1 つをクリックすると、div コンテナーの最後の画像のみが表示されます。私は明らかに何か間違ったことをしていますが、私は正しい方向に進んでいるように感じます. 助けてください。