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 ja5on
ja5on
10,338 Points

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

jb30
jb30
44,806 Points

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.

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

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.

jb30
jb30
44,806 Points

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?

ja5on
ja5on
10,338 Points
ja5on
ja5on
10,338 Points

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