无法使用Javascript隐藏图像_Javascript_Html_Image

无法使用Javascript隐藏图像

javascript html image

无法使用Javascript隐藏图像,javascript,html,image,Javascript,Html,Image,我正试图为我的计算机科学项目隐藏一些图像，但它似乎不起作用。有人知道为什么吗这是HTML <!DOCTYPE html> <html> <head> <title>Fitness Programs</title> <script src="script.js"></script> </head> <body> <!-- program choices --

我正试图为我的计算机科学项目隐藏一些图像，但它似乎不起作用。有人知道为什么吗

这是HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Fitness Programs</title>
    <script src="script.js"></script>
  </head>
<body>
 <!-- program choices -->
   <img src ="cardio.jpg" width ="350" height="200" id="cardio">
   <img src ="hiit.jpg" width = "350" height="200" class="hiit">
   <img src ="strength.jpg" width = "350" height="200" class="strength">
   <img src ="toning.jpg" width = "350" height="200" class="toning">

</body>
</html>

问题是您正在为第一个元素和

id

以及其余的

class

您的代码告诉浏览器隐藏id为

cardio

、

hiit

、

strength

和

toning

的元素。浏览器查找这些元素，只查找有氧运动，并将其隐藏。重置不会隐藏这些元素，因为您给它们的是

类，而不是id，
所以解决这个问题有两种方法
1） 将class
更改为id
，代码将正常工作
2） 您将cardio
id更改为class
，并在用例2中实现代码
用例1的示例


用例2的exmaple
var elements=document.getElementsByClassName（“hiit”）；
对于（var i=0；i

阅读有关
的更多信息请将属性名称从class
更正为id
您需要了解如何使用浏览器中的调试工具。如果您在浏览器的开发工具中查看了控制台，将会有一些有用的错误消息。我确实查看了控制台，但没有显示任何内容。class=“cardio”@Quentin updated没有任何元素。问题中的代码在遇到由于混淆类和id而导致的任何问题之前失败。@Quentin代码正常工作，问题我没有解释问题，我会更新answer@Quentin现在呢？
// hide images
document.getElementById("cardio").style.display = "none";
document.getElementById("hiit").style.display = "none";
document.getElementById("strength").style.display = "none";
document.getElementById("toning").style.display = "none";

<img src ="cardio.jpg" width ="350" height="200" id="cardio">
<img src ="hiit.jpg" width = "350" height="200" id="hiit">
<img src ="strength.jpg" width = "350" height="200" id="strength">
<img src ="toning.jpg" width = "350" height="200" id="toning">

var elements = document.getElementsByClassName("hiit");
for(var i =0; i < elements.length; i++) {
    var element = elements[i];
    element.style.display = 'none';
}