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

Posted by Scott Wilcox
Scott Wilcox
9,517 Points

jquery .hide();

Problem: I have 5 images, each requiring there own css styling.

I have created a class for each image in the stylesheet like this.

.mHp1 { background-image: url(../img/h1.jpg); background-repeat: no-repeat; background-size: 475px 150px; background-color: black; background-position-x: 165px; }

.mHp2 { background-image: url(../img/h2.jpg); background-repeat: no-repeat; background-size: 450px 150px; background-color: black; background-position-x: 110px; }

and so on up to .mHp5

In the html DOM this is the div.

<header> <div class="grid-container main-header mHp1 mHp2 mHp3 mHp4 mHp5"> <div class="grid-4"> <div class="mL"> <h1>jhgkhhgg<font size="+1">.jyu</font></h1> <h2>khfkfkfkf</h2> <h2>jhljghkghgkg</h2> </div>
</div> <div class="grid-12"> </div> <script src="js/h.image.js"></script> </div>

In my js file I did a test.

$(".mHp1").hide();

Instead of just hiding the .mHp1 class it hid the entire main-header container. The .js file is at the bottom of but inside the div. If I move the js file outside the div above or below, it does nothing.

What I am trying to do is create a Jquery that randomly rotates through the background-image on each page load.

// Hide all background-images $(".mHp1 .mHp2 .mHp3 .mHp4 .mHp5").hide();

// Generate a random number from 1 to 5 function imageRandomNum( ) { var num = Math.floor(Math.random() * 5) + 1; return num; }

// Show the Image of the random number imageRandomNum() { if (imageRandomNum === 1) { $(".mHp1").show(); }else if (imageRandomNum === 2) { $("mHp2").show(); }else if (imageRandomNum === 3) { $("mHp3").show(); }else if (imageRandomNum === 4) { $("mHp4").show(); }else (imageRandomNum === 5) { $("mHp5").show(); } }

Not sure if this will work or not. The main question is WHY is it hiding my entire header. This seems so easy to do in concept but I'm either brain dead or just completely confused.

7 Answers

Scott Wilcox
Scott Wilcox
9,517 Points

Final Code and working

// randomly rotate through 5 background images in the header. $(".mHeader").addClass(function(){ var num; num = Math.floor(Math.random() * 5) + 1;

if (num === 1) {
    return "mHp1";
} else if (num === 2) {
    return "mHp2";
} else if (num === 3) {
    return "mHp3";
} else if (num === 4) {
    return "mHp4";
} else {
    return "mHp5";
}

});

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

What your hide() statement is doing is hiding the element with the class mHp1. You've assigned that one element a bunch of different classes. In other words, what you're calling "the entire main-header container" is also of class mHp1.

Scott Wilcox
Scott Wilcox
9,517 Points
Scott Wilcox
Scott Wilcox
9,517 Points

Oh think I figured this out. I need to be using the .addClass()

Peter Smith
Peter Smith
12,347 Points

Hey Scott, I read through your question, I read Greg's answer.

I'm curious if you've truly figured it out and if so, how are you using addClass()?

Scott Wilcox
Scott Wilcox
9,517 Points
Scott Wilcox
Scott Wilcox
9,517 Points

$(".mH").addclass(function(){ var num = Math.floor(Math.random() * 5) + 1; if (num === 1) { return "mHp1"; } else if (num === 2) { return "mHp2"; } else if (num === 3) { return "mHp3"; } else if (num === 4) { return "mHp4"; } else { return "mHp5"; } });

This is what I came up with but I am getting an Error on line 1

Uncaught TypeError: undefined is not a function

Scott Wilcox
Scott Wilcox
9,517 Points
Scott Wilcox
Scott Wilcox
9,517 Points

...js $(".mH").addclass(function(){ var num = Math.floor(Math.random() * 5) + 1; if (num === 1) { return "mHp1"; } else if (num === 2) { return "mHp2"; } else if (num === 3) { return "mHp3"; } else if (num === 4) { return "mHp4"; } else { return "mHp5"; } }); ...

Scott Wilcox
Scott Wilcox
9,517 Points
Scott Wilcox
Scott Wilcox
9,517 Points

Ok now I am just completely confused.

$(".mH").addclass("mHp1");

This is as simple as it gets. add class mHp1 to class mH

and I am still getting

Uncaught TypeError: undefined is not a function

Peter Smith
Peter Smith
12,347 Points

.addClass() not .addclass()

functions are case-Sensitive

Scott Wilcox
Scott Wilcox
9,517 Points
Scott Wilcox
Scott Wilcox
9,517 Points

Ok that took care of the error. and it is working perfectly.