Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Killeon Patterson
Killeon Patterson
18,528 Points
Posted by Killeon Patterson
Killeon Patterson
18,528 Points

Click event change content

I'm trying to get a click event to toggle the overlay and display of an element. I want to be able to click on the image and have the text appear. Nothing is firing on the function I creating. Any ideas? (the intended image and text are labeled at toward the bottom of the CSS)

<!Doctype html>
<html>
  <body>
  <head>
  <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
   <link rel='stylesheet' href='css/style.css'>
  <title> Sat9 | Media</title>

    </head>
  <header id="header">

    <div class='head-zero'>
      <img class='logo' src="img/Logo.PNG"/>
      </div>

    <div class='nav-main'>
    <ul>
      <li><a href='about.html'>about</a></li>
      </ul>
    </div>


  </header>

    <section class='wrap'>

      <div>
    <h1 class='head0'>
      Social Feature 
      </h1>
    </div>



      <div class="part0">


      <img class='airtraffic' src="img/airtraffic.JPG" />

      <img class='green' src="img/clouds.JPG" />

        <p class='descr0'>Local restaurant/entertainment news
        </p>

        <p class='descr1'>Movie/entertainment review</p>
      </div>

         <div>
    <h1 class='head1'>
      Lifestyle 
      </h1>
    </div>



    <div class="part1">


      <img class='gold' src="img/gold.JPG" />

      <img class='silver' src="img/silver.JPG" />

       <p class='descr2'>
         Avant . Garde | Glam Metal
        </p>



      </div>


        <div>
    <h1 class='head2'>
      Sponsor 
      </h1>
    </div>

      <div class='part2'>

      <a  href='index.html'  target="_blank"><img class='stat' src='img/stat.PNG'/></a>



      </div>





    </section>





    <footer class='foot'>

  </footer>

    <script src='js/javascript.js'></script>
  </body>

</html>

 body
{
border: 5px solid #e8e5e5;

}

 a 
{
text-decoration: none;
color: black;

}

li
{
list-style: none;

}
img
{
width: 100%;


}


.head-zero
{
text-align: center;

}
 .logo 
{
height: 13%;
width: 13%;

}


.nav-main li a
{
color: #d3dcfe;
font-size: 2em;


}

.head0, .head1, .head2 
{
  margin: 0 auto;
  margin-bottom: 3%;
  margin-top: 2%;
  max-width: 19%;
  text-align: center;
  border: 3px solid black;

}


.caption
{
color: #fdf7bd;
font-size: 12em;
font-family:'Permanent Marker', cursive;

}


.aboutfoot
{
border-bottom: 26px solid #e2fee2;


}

.foot 
{
border-bottom: 10px solid #d1cccc;
margin-top: 5%;

}





@media only screen and (min-width: 768px),
       only screen and (min-width: 700px) and (orientation: landscape){



.wrap
{
min-height: calc(100vh - 10px);
 }


  #header
{
position: relative;

}


.nav-main 
{
position: absolute;
top: 20%;
right: 20%;

}



.stat
{
width: 40%;
 height: 40%;
 border: 8px solid #dcd8d8;
  }



.part2
{
  text-align: center;
  margin-top: 6%;

}


 .leggo
{
position: relative;

}

.caption
{
position: absolute;
font-size: 7em;
top: -2%;
left: 33%;
text-decoration: underline;

}

footer
{
color: blue;
max-height: 9em;


}

}




@media (min-width: 1025px) {



.wrap
{
min-height: calc(100vh - 10px);
 }


  #header
{
position: relative;

}


.nav-main 
{
position: absolute;
top: 20%;
right: 20%;

}

 .part0, .part1
{
display: inline-block;
text-align: center;
position: relative;


}

.part1
{
margin-top: 2%;


}


/////IMAGE///////////

.airtraffic 
{
  width: 45%;
  height: 45%;
  opacity: .18;
  border: 2px solid steelblue;
}

.green 
{
   width: 38%;
 height: 38%;
   opacity: .18;
  border: 2px solid steelblue;

}


////TEXT//////
.descr0
{
font-size: 1.6em;
position: absolute;
  top: 35%;
  left: 16%;
  display: none;
}

.descr1
{

font-size: 1.6em;
position: absolute;
  top: 35%;
  right: 16%;
  display: none;
}


 .gold, .silver
{
width: 30%;
height: 30%;
opacity: .18;  

}

.descr2
{
font-size: 1.6em;
position: absolute;
  top: 35%;
  left: 40%;
  display: none;

}



.silver
{
margin-right: 2%;


}



.stat
{
width: 40%;
 height: 40%;
 border: 8px solid #dcd8d8;
  }

.part2
{
  text-align: center;
  margin-top: 6%;

}


 .leggo
{
position: relative;

}

.caption
{
position: absolute;
font-size: 12em;
top: -5%;
left: 30%;
text-decoration: underline;

}

footer
{
color: blue;
max-height: 9em;


}

}

var airtraffic = document.querySelector('.airtraffic');
var descr = document.querySelector('.descr0');

airtraffic.addEventListener('click', () => {

if ( descr.style.display == 'none' ) {
descr.style.display = 'show';
} else {
     descr.style.display = 'none';

}
});

2 Answers

Ella Ruokokoski
Ella Ruokokoski
20,881 Points

Hey! show is not a value of the display property. Change that to "block"

Patryk Nowak
Patryk Nowak
14,103 Points
Patryk Nowak
Patryk Nowak
14,103 Points

Hi Killeon, better approach would be adding or removing (toggling) class.

so inside your EventListener function:

airtraffic.addEventListener('click', () => {

  descr.classList.toggle("visible");

});

.descr {
  display: none;
}

.visible {
  display: block;
}