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

Trying to hide/show myData

https://w.trhou.se/jiaa54bmcz

Using a button to hide/show myData in <label id="myData">

I've gotten lost.

3 Answers

Instead of

if ( onclick.addEventListener == true ){
    document.getElementById("myData").style.display = "none";
}

try

document.getElementById("onclick").addEventListener("click", () => {
  const dataLabel = document.getElementById("myData");
  if (dataLabel.style.display == "none") {
    dataLabel.style.display = "block";
    dataLabel.style.minWidth = "1em";
    dataLabel.style.minHeight = "1em";
  } else {
    dataLabel.style.display = "none";
  }
});

The label with the id "myData" is currently empty, so changing the display property does not show or hide any text. Giving the label a minimum width and height allows the label's background color to be visible when the label is displayed.

Thank you for your answer to my problem, I will keep the code safe for future projects.... Now though I'm having a little difficulty populating the label "myData" with my JavaScript data.

This is the more recent program https://w.trhou.se/bat909qpqs I feel like I should know this but am unable to make the connection.. I will work on it for a bit to see if I can get it to work.

I'm thinking that :-
document.write("firstName: " + typeof firstName + "<br>");
document.write("valueOfPi: " + typeof valueOfPi + "<br>");
document.write("isValid: " + typeof isValid + "<br>");
document.write("jsObject: " + typeof jsObject + "<br>");
document.write("jsMethod: " + typeof jsMethod + "<br>");
document.write("jsSymbol: " + typeof jsSymbol + "<br>");
document.write("emptyVariable: " + typeof emptyVariable + "<br>");
document.write("unusedVariable: " + unusedVariable + "<br>");

should all be in a function and these are placed somehow into the label when the button is clicked, its a bit beyond me. BTW I'm just creating my own projects to learn how javascript works, as instructed by the teachers, I must admit this is as far as my thinking goes.

Instead of using document.write, have you considered using document.getElementById("myData").textContent = "firstName: " + typeof firstName + "<br> ... unusedVariable: " + unusedVariable + "<br>"; when the button is clicked?

Thanks again - sorry to pick your brains so much but youve really helped me alot..