Need help with CodePen

JavaScript
1

I am taking LinkedIn Learning’s Introduction to Web Design and Development and am stuck.

My HTML and CSS codes are great and get the same results the instructor gets. However, when I copy and paste her Javascript nothing happens.

Codes are below -

HTML -

<button class="Click Me">Click Me</button>

<section class="hidden">
  <h1>Look what I'm learning!</h1>
  <p>When clicked a button will reveal this text.</p>
  <p>Click again, and the text will hide away!</p>
</section>

CSS code -

button {
  background-color: #f2c33c;
  font-size: 20px;
  color: #000000;
  padding: 10px;
  border-radius: 10px;
  border: 3px solid #808080;
  }
button:hover {
  background-color: #7cc272;
  color: #333333;
}
.hidden {
  display: none;
}
.showing {
  display: block;
  font-family: Arial, sans-serif;
  background-color: #509fcb;
  color: #000000;
  width: 400px;
  padding: 20px;
  margin-top: 20px;
  border-radius: 10px;
  }

JavaScript Code -

document.querySelector(".clickme").addEventListener("click", () => {
  document.querySelectorAll(".hidden").forEach((item) => {
    item.classList.toggle("showing");
  });
});
2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

I have noticed a few things here

In your JavaScript, you are trying to access an element with a class of .clickme but you don’t have that class inside your HTML

what you currently have in your HTML, are two classes

one called Click and the second class called Me

once you fix that, then it should work as intended

4

jwilkins.oboe, thank you for the prompt feedback. I greatly appreciate it.

I’m really knew at this, so do you mind showing me what I need to add for the link to work?

5

You need to add the clickme class to your button for it to work.

But also, I would suggest reviewing the first few projects of responsive web design certification on freeCodeCamp so you can better understand how classes work.

That way you will better understand why your code isn’t working.

Hope that helps

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.