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 Jennifer Hinkle
Jennifer Hinkle
8,365 Points

jQuery lightbox for text

Hello,

I've been following the jQuery Basics course, and just finished the Creating a Simple Lightbox stage.

I'm attempting to take what I learned from that, and create a Lightbox on a website I'm making. But instead of it being with images, it's with text (e.g click a question, the answer is overlaid on the page).

I've gotten the overlay to appear when the question is clicked, but instead of showing my answer, it shows:

[object Object]

I know it has to do something with how I'm trying to get my answer text assigned to a variable.

my HTML: 

<ul id="questionGallery">
    <li>
        <a href="#" class="question">Why isn't the sky purple?</a>
        <p class="answers">
        I'm not sure, but it'd be pretty cool, huh? 
        </p>
    </li>
</ul>

my JS: 

//Problem: clicking question doesn't do anything
//Solution: create an overlay with the answer

var $overlay = $("<div id='overlay'></div>");
var $answer = $("<p></p>");

    //Add answer to overlay
    $overlay.append($answer);
    //Add overlay
    $("body").append($overlay);

// Capture the click event on a link to nowhere
$("#questionGallery a").click(function(event){
    event.preventDefault();
    var answerText = $(this).children("p.answers");
    // Update the overlay with the answer from the list item
    $answer.text(answerText);

    // Show the overlay
    $overlay.show();
});

// When overlay is clicked, 
$overlay.click(function(){
  // hide the overlay
  $overlay.hide();
});

Sorry if this is confusing, but any help is super appreciated!

Jenn

ps- I tried doing the ```HTML thing to format my code correctly, but for some reason it didn't work and just messed up the way all my code was displayed. So again, sorry if that's confusing!

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

Where you have the following line

 var answerText = $(this).children("p.answers");

What does it do if you add this instead

 var answerText = $(this).children("p.answers").val();

1 Answer

Jennifer Hinkle
Jennifer Hinkle
8,365 Points

Hi Adam,

Thanks for your response! But I actually just figured it out after starting the next stage of jQuery Basics. I just use the .text() (umm, these are called functions? attributes? I don't remember, will look that up in a moment ...)

My answer:

Instead of 

var answerText = $(this).children("p.answers");

I used: 

var answerText = $("p.answers").text();

And it worked perfectly! I tried your suggestion and nothing appeared. I think my mistake was with using the .children() because the <p> I'm trying to show isn't actually a child of the $(this)

Thanks again! Jenn

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

No problem!! Glad you fixed it :)