Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Killeon Patterson
Killeon Patterson
18,133 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

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

Patryk Nowak
Patryk Nowak
14,102 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;
}