-1

I would like to select all of thumbnails in the grid. Can I choose "thumbnail r1, thumbnail r 2...." just by calling .thumbnail, so skipping the rx part?

Can I choose them with:

let thumbnails = document.querySelectorAll(".thumbnail");

or

let thumbnails = document.querySelectorAll(".thegrid");

or should I use id="#the-content"?

      <div id="maincontent" class="flex-item">
        <div id="the-content" class="tabcontent hidden">
          <h1>title</h1>
          <div class="thegrid">
            <div class="thumbnail r1"><h2>one</h2></div>
            <div class="thumbnail r2"><h2>two</h2></div>
            <div class="thumbnail r3"><h2>three</h2></div>
            <div class="thumbnail r4"><h2>four</h2></div>
            <div class="thumbnail r5"><h2>five</h2></div>
            <div class="thumbnail r6"><h2>six</h2></div>
            <div class="thumbnail r7"><h2>seven</h2></div>
          </div>
        </div>
Nor Moon
  • 11
  • 2
  • Do you mean `document.querySelectorAll("#the-content .thumbnail")`? – Sebastian Simon Dec 07 '22 at 09:39
  • maybe `document.querySelectorAll('.thegrid .thumbnail')`, or `document.querySelectorAll('.thumbnail')` – ericmp Dec 07 '22 at 09:39
  • You can't select anything using `#thumbnail` or `#thegrid`- these are ID selectors, but there are no elements with these IDs in the HTML you have shown. – CBroe Dec 07 '22 at 09:41
  • Hey! Thanks for your help, and noting my . and # error. My question is essentially, can I choose the thumbnail classes r1-r7 just by calling ".thumbnail" or should the calling always include the full class name, meaning "thumbnail r1".."thumbnail r7"? Cheers – Nor Moon Dec 07 '22 at 09:47
  • 3
    Why are you asking this instead of running the code and seeing what happens? It takes a lot more effect to compose a SO question! – Quentin Dec 07 '22 at 09:47
  • 2
    (Also read the HTML documentation. The class attribute doesn't define the class name (singular), it defines a space separated list of class names (plural)). – Quentin Dec 07 '22 at 09:48
  • Thanks Quentin, I'm struggling to get it to work and don't know where the error is! – Nor Moon Dec 07 '22 at 09:48
  • If you can't get it to [work](https://idownvotedbecau.se/itsnotworking/) then ask a question of the form "Here is my [mcve], I expect it to do X but it does Y." Not one of the form "Does this work?" – Quentin Dec 07 '22 at 09:49
  • 2
    Odds are that this is either [yet another duplicate of this](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) or that the problem is with what you do with the `thumbnails` afterwards – Quentin Dec 07 '22 at 09:51
  • Hey Quentin - I will format my question in another way another time, though I think essentially the content of my question is the same as what you're suggesting. I find no help in your "yet another duplicate", thanks though. – Nor Moon Dec 07 '22 at 09:55
  • _“I find no help”_ — So your ` – Sebastian Simon Dec 07 '22 at 09:56
  • Hey Sebastian Simon, those words don't mean much to me. I'm new to coding, literally taking my first course in it and was hoping to find guidance here to a rather simple question that I was struggling to find an answer to by googling/trying it out. Cheers – Nor Moon Dec 07 '22 at 10:01
  • If you're not going to provide a [mcve] then expect this to be closed as "Unclear" or "Not reproducible". You have to give people enough information to work with before they can help you. – Quentin Dec 07 '22 at 10:05
  • ```
    ``` here ```.thumbnail``` and ```.r1``` both are different classes. You can just call them by ```let thumbnails = document.querySelectorAll(".thumbnail")```. What the error you are getting ?
     – Srushti Shah Dec 07 '22 at 10:35
  • Thank you a bunch, Srushti Shah!! This answers my question! The error is further down in the code. I'll have to figure it out. – Nor Moon Dec 07 '22 at 10:55

1 Answers1

0

let thumbnails = document.querySelectorAll(".thumbnail");

this will work @Nor Moon

Aathishithan G
  • 32
  • 3