-1

I am trying to hide some images for my computer science project but it won't seem to work anyone know why?

Heres the 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>

Heres the Javascript

// 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";
its_siobhanx
  • 21
  • 2

1 Answers1

-1

the problem is that you are giving the first element and id and the rest a class

your code tells the browser to hide the elements that has an id of cardio,hiit,strength and toning. the browser looks for these elements and finds only cardio and hides it the reset does not because you are giving them a class insted of id, so there is 2 ways of solving this issue,

1) change class to id and the code will work

2) you change the cardio id to class and implement the code in use case 2.

example of use case 1

<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">

exmaple of use case 2

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

Read More About document.getElementsByClassName

Jamal Abo
  • 433
  • 3
  • 15
  • 1
    There is no element with `class="cardio"` – Quentin Jul 10 '19 at 15:45
  • @Quentin updated – Jamal Abo Jul 10 '19 at 15:46
  • The code in the question fails before running into any problems caused by confusing class and id. – Quentin Jul 10 '19 at 15:47
  • @Quentin the code works, the problem i did't explain the problem, i'll update the answer – Jamal Abo Jul 10 '19 at 15:48
  • @Quentin how about now? – Jamal Abo Jul 10 '19 at 15:53
  • You've still missed the primary problem. See the duplicate. – Quentin Jul 10 '19 at 15:55
  • @Quentin the duplicate explains why this would happen but does not explain the mistake or the fail try of the question, he looks like he missed/forgot to change `class` to `id` or he does not understand the way of element searching, the duplicate answer this after you get to understand the functionality of `getElementById` or `getElementsByClassName` – Jamal Abo Jul 10 '19 at 15:58
  • The class/id confusion is a different error that would be encountered later (after the primary problem is solved). – Quentin Jul 10 '19 at 15:59
  • @Quentin i can agree with you on that since the title is `Unable to hide` and the dupliate you provided answer a cases where this issue could happen, but the questioner attempt to achive the goal he wants diffrent from the duplicate answer has – Jamal Abo Jul 10 '19 at 16:03
  • No. It isn't. The ` – Quentin Jul 10 '19 at 16:03
  • @Quentin Right, this is an issue, and the answer i provided solves the second issue, this code has 2 problems the duplicate answer you provided does not solve the entire issue, (the code will still not work) – Jamal Abo Jul 10 '19 at 16:05
  • @Quentin would you re-consider marking this as duplicate? – Jamal Abo Jul 10 '19 at 16:15
  • No I understand the class/id difference I had been editing the code many different ways to make it work so forgot to change it back so that it was all the same. Anyway I have tried both class and id and still can’t get it working – its_siobhanx Jul 11 '19 at 21:47