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
Maria Cecilia Le Brech
3,611 PointsWhats wrong with this js?
Im doing a celebrity dating app for the class, and the three first of them appear (#Miley, #Scarlett, #Hillary). Now when i try to make #Obama appear it doesnt! Heres the html, the js and the css for you to help me. I promise selecting a best answer!
JAVASCRIPT $(document).ready(function() { $("form#celebrity").submit(function(event) { var age = parseInt($("input#age").val()); var gender = $("select#gender").val();
if (gender === "male" && age < 21) {
$("#Miley").show();
} else if (gender === "male" && age >= 21 && age <= 30) {
$("#Scarlett").show();
} else if (gender === "male" && age > 30) {
$("#Hillary").show();
} else if(gender === "female") {
$("#Obama").show();
} else {
alert("Please enter information correctly. Refresh and try again!");
}
event.preventDefault();
});
});
INDEX.HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Celebrity dating</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <link href="css/styles.css" rel="stylesheet" type="text/css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/scripts.js"></script> </head> <body> <div class="container"> <h1>Which celebrity is right for you?!</h1>
<p>Please enter your age and gender in the form and find out your true love !</p>
<form id="celebrity">
<label for="age">Age</label>
<input id="age" type="text">
<label for="gender">Gender</label>
<select id="gender">
<option value="female">Female</option>
<option value="male">Male</option>
</select>
<button type="submit" class="btn">I'm ready to love!</button>
</form>
<div class="container">
<div id="Miley">
<h1>You chose an singer!</h1>
<img src="img/miley.jpeg">
<p>Lorem ipsum dolor sit amet, sea ut epicurei dissentias, sed no possit nostrud laoreet. Vim id causae omittantur, sit impetus comprehensam eu, detracto lucilius ad vis. Omnium tincidunt per ei. Mel ad prima salutatus efficiendi, et quas mnesarchum dissentiet has. Vim at perfecto percipitur, vim cu suas simul prodesset, vel in hinc quas. Mei cu doming abhorreant, doming causae his te.</p>
</div>
<div id="Scarlett">
<h1>You chose a actress!</h1>
<img src="img/scarlett.jpeg">
<p>Lorem ipsum dolor sit amet, sea ut epicurei dissentias, sed no possit nostrud laoreet. Vim id causae omittantur, sit impetus comprehensam eu, detracto lucilius ad vis. Omnium tincidunt per ei. Mel ad prima salutatus efficiendi, et quas mnesarchum dissentiet has. Vim at perfecto percipitur, vim cu suas simul prodesset, vel in hinc quas. Mei cu doming abhorreant, doming causae his te.</p>
</div>
<div id="Hillary">
<h1>You chose a politician!</h1>
<img src="img/hillary.jpeg">
<p>Lorem ipsum dolor sit amet, sea ut epicurei dissentias, sed no possit nostrud laoreet. Vim id causae omittantur, sit impetus comprehensam eu, detracto lucilius ad vis. Omnium tincidunt per ei. Mel ad prima salutatus efficiendi, et quas mnesarchum dissentiet has. Vim at perfecto percipitur, vim cu suas simul prodesset, vel in hinc quas. Mei cu doming abhorreant, doming causae his te.</p>
<div id="Obama">
<h1>You chose a politician!</h1>
<img src="img/obama.jpg">
<p>Lorem ipsum dolor sit amet, sea ut epicurei dissentias, sed no possit nostrud laoreet. Vim id causae omittantur, sit impetus comprehensam eu, detracto lucilius ad vis. Omnium tincidunt per ei. Mel ad prima salutatus efficiendi, et quas mnesarchum dissentiet has. Vim at perfecto percipitur, vim cu suas simul prodesset, vel in hinc quas. Mei cu doming abhorreant, doming causae his te.</p>
</div>
</div>
</div>
</body>
</html>
CSS FILE
Miley, #Scarlett, #Hillary, #Obama {
display: none;
}
img { width: 200px; height: 170px; }
.container{ text-align:center;
}
Simon Coates
28,695 Pointswhen you post a new comment, there should be a link under the comment to a "markdown cheatsheet". This explains the format that makes code display correctly in the forum.
Maria Cecilia Le Brech
3,611 PointsOh i found i forgot to close a div! in the html... The only problem now is the alert box doesnt display
Simon Coates
28,695 Pointsgender may affect whether alert shows or not. need to set to male and without age.
4 Answers
Joel Bardsley
31,258 PointsYes there is - at the start of your function you could hide() all divs within the container by doing something like:
$(".container > div").hide();
and then the code would run through your conditional statements and just display the chosen result.
Joel Bardsley
31,258 PointsThe #Obama div is nested within the #Hillary div in your HTML, so #Obama will won't appear on screen unless both divs are set to show. This, however, isn't possible because of the gender conditions in your javascript.
Maria Cecilia Le Brech
3,611 PointsI managed to show the #Obama but the alert box (if someone writes something else than numbers) doesnt work. Also if i do it one after the other they stack i the page instead of dissapear and letting the other show. How can i solve this? Is there a hide method or something? Thanks!
Maria Cecilia Le Brech
3,611 PointsI tried that and then the divs doesnt show
Maria Cecilia Le Brech
3,611 PointsMaria Cecilia Le Brech
3,611 PointsSorry it pasted weird