0

Hoping you good folk can help me with this one. I am trying to use a nav link to show a hidden div when clicked but I keep getting the error message "Uncaught TypeError: Cannot read property 'display' of undefined at HTMLAnchorElement."

this appears for the line of code = if (contentOneClick.style.display == "none") yet if i taker either the word "style" or the word "display" out of this code then i do not get the error message which has left me confused as i have watched content of this being used and working well for others. below is the whole function code. The display is set to "none" in the style code. I am new to web development so my apologies if this is a silly question.

`document.getElementById('content-one').addEventListener("click", function() {

  var contentOneClick = document.getElementsByClassName(".content-one-container");

    if (contentOneClick.style.display == "none") 
    {
     console.log ("content is hidden");
    }
    else 
    {
      console.log("content is visible");
    }

});         `
peterhwebdev
  • 1
  • 1
  • That's because you are getting a `NodeList` in `contentOneClick` you're getting all elements with the class name `.content-one-container`. If you dont want to use id and you're sure there's just one element with the classname try this: ``` if (contentOneClick[0].style.display == "none") ``` – Rahul Purohit Apr 26 '20 at 17:03
  • Also, `getElementsByClassName` expects a *class name*, but you're giving it a *selector*. Remove the `.` if you want to use `getElementsByClassName`, or use `querySelectorAll` if you want to find all matches for a selector, or use `querySelector` if you just want to find the *first* match for a selector. – T.J. Crowder Apr 26 '20 at 17:04
  • Thanks for the quick reply guys. Yes i should have realised i was getting a NodeList with that. I have gone back and used an id rather than class name and taken the . away which has fixed the error message but the console log always tells me that the content is visible yet it is set to display:none in my style code and it is clearly not visible in the browser. Even when trying you solutions im still getting the same thing. I know the solution is a very simple one but im not seeing it and feeling very foolish right now – peterhwebdev Apr 26 '20 at 18:52

1 Answers1

1

The problem is that getElementsByClassName returns a nodeList, therefore, you should specify which element having class content-one-container you want to use:

var contentOneClick = document.getElementsByClassName("content-one-container")[0];

                                                       ^ remove the .
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48
  • There's a [very well-established dupetarget](http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) for this question. It's asked all the time. It doesn't need answering, just closing as a dupe and a comment to help the OP see how to apply the answers. – T.J. Crowder Apr 26 '20 at 17:02
  • I know that this is a common question, but the code contains a syntax error as well which needs to be shown otherwise any attempt won't work – Majed Badawi Apr 26 '20 at 17:04
  • Well, technically not a syntax error. :-) (You *can* have a `.` in a class name, it's just an amazingly bad idea.) But likely a typo. There's a close reason for those, too. But whatever. :-) – T.J. Crowder Apr 26 '20 at 17:08