我的目标是有一个图像隐藏，直到一个按钮被按下，然后显示以前隐藏的图像。

现在我在HTML中有一个ID为“ Yellowrose ”的图像。使用以下代码隐藏的：

<代码><；DIV ID="；Yellowrose"；>；<；IMG SRC="；https：//i.imgur.com/ppfhza6.jpg" style=可见性：隐藏"；>；<；/DIV>；

在JS中，我用ButtonX.onClick做了几件事，但我似乎无法使图像可见。下面是我的JS代码：

    <div id="yellowrose"><img src="https://i.imgur.com/ppfhZa6.jpg" style="visibility:hidden"></div>

你对我如何制作“黄玫瑰”有什么建议吗？通过ButtonX.OnClick函数可见的图像？谢谢.

顺晟科技：

var content = document.getElementById("content"); var buttonx = document.getElementById("show-more"); let yellowrose = document.getElementById("yellowrose"); window.onload = function(){ buttonx.onclick = function () { document.getElementById("yellowrose").style.visibility="visible"; if(content.className == "open") { //shrink the box content.className = ""; buttonx.innerHTML = "Continue to the Sunlit Pavillion?"; } else{ //expand the box content.className = "open"; buttonx.innerHTML = "As you wander through the garden grounds you notice a striking Yellow Rose"; } } } 不能包含空格。

根据MDN：

var content = document.getElementById("content"); var buttonx = document.getElementById("show-more"); let yellowrose = document.getElementById("yellowrose"); window.onload = function(){ buttonx.onclick = function () { document.getElementById("yellowrose").style.visibility="visible"; if(content.className == "open") { //shrink the box content.className = ""; buttonx.innerHTML = "Continue to the Sunlit Pavillion?"; } else{ //expand the box content.className = "open"; buttonx.innerHTML = "As you wander through the garden grounds you notice a striking Yellow Rose"; } } } 的值不得包含空格（空格、制表符等）。浏览器将包含空格的不一致ID视为空格是ID的一部分。与类属性（允许使用空格分隔的值）相比，元素只能有一个ID值。

此外，您正在设置id（图像的容器）的visibility，而不是图像本身。要解决这个问题，只需获取#yellowrose属性：

firstChild

<代码>.打开{能见度：可见！重要的；}

<代码><；DIV ID=“黄色玫瑰”>；<；IMG SRC=“ https：//i.imgur.com/ppfhza6.jpg ” style=“可见性：隐藏”>；<；/DIV>；<；button ID=“ showmore ”>；显示更多<；/button>；<；DIV ID=“内容”>；内容<；/DIV>；