无法获取 ID 以在单击时关闭

Question

因此窗口的ID是moreInfo，并且在CSS中显示设置为none。showMore功能用于显示窗口，但当我单击关闭图标时，窗口不会消失。

HTML:

<div id="moreInfo">
<div class="iconContainer">
<img onclick = "javascript:close()" id="closeicon" src="images/closeicon.png"/>                
</div>
<div class="infoContent">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/stationary.png" alt="image">
</div>
</div>
<!-- Page content -->
<div class="imageSection" id="Charcoal">
<h2>Soth Charcoal</h2>
<div class="images">
<img onclick="javascript:showMore()" id = "thumbnailimg" src = "images/charcoal.png" alt="image">
</div>
</div>

javascript文件：

function showMore(){
document.getElementById("moreInfo").style.display= "block";
}
function close(){
document.getElementById("moreInfo").style.display = "none";
}

Answer 1

close是一个保留字。将函数名称更改为myClose

function showMore(){
console.log('show')
document.getElementById("moreInfo").style.display= "block";
}
function myClose(){
console.log('close');
document.getElementById("moreInfo").style.display = "none";

}

<div id="moreInfo">
<div class="iconContainer">
<img onclick = "javascript:myClose()" id="closeicon" src="images/closeicon.png"/>                
</div>
<div class="infoContent">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/charcoal.png" alt="image">
<img id = "thumbnailimg" src = "images/stationary.png" alt="image">
</div>
</div>
<!-- Page content -->
<div class="imageSection" id="Charcoal">
<h2>Soth Charcoal</h2>
<div class="images">
<img onclick="javascript:showMore()" id = "thumbnailimg" src = "images/charcoal.png" alt="image">
</div>
</div>