-1

Topics, Specialist, Text I have segments that look like little cards with words in them. I would like to unhide a description for the specific word when the user hovers over them.

The code I have is as follows with the concerned classes being "specialist", "specialist-text":

const spec = document.querySelector('.specialist')
const spect = document.querySelector('.specialist-text')

spec.addEventListener('mouseenter', () => spect.classList.remove('hidden'))
.hidden {
  display: none;
}
<section class="topics">
        <h3 class="large center my-1">Topics</h3>
        <div class="width grid overflow">
             <div class="topic-list-update">
                <div class="card2 center btn2 specialist">Specialist</div>
             </div>
             <div class="topics-text">
                <div class="specialist-text hidden">Specialist mathematics 1234</div>
             </div>
        </div>
</section>

And I don't understand why it's not working. I attempted with addEventListener('mouseover'), I have tried using document.getElementById and I tried to use a function instead of an arrow function.

I am receiving an error when launching the html file in firefox:

Uncaught TypeError: spec is null
    <anonymous> http://127.0.0.1:5500/js/script.js:12

I am a complete beginner and I thank you in advance for your help.

Seahorse
  • 1
  • 3
  • 1
    I've converted the code into a runnable snippet and added the `hidden` class to `.specialist-text` to actually test the functionality, and it appears to be working. In what way are you observing otherwise? – David Jul 15 '22 at 12:11
  • @David I would like the hidden class to be removed when hovering over the text. The hidden class is simply ```display:none;``` – Seahorse Jul 15 '22 at 12:13
  • 1
    That's exactly what your code does. Whatever is failing, it doesn't seem to be represented here. – David Jul 15 '22 at 12:14
  • When I open the index.html in the browser and hover over "Specialist" it scales it properly, ```.card2:hover{ transform: scale(0.95); }``` and ```.topic-list{ transition: display 0.2s ease; }``` But there is no text displaying. The error states that "spec is null" – Seahorse Jul 15 '22 at 12:17
  • I don't doubt that *something* is failing, but your assumption about *what* is failing is incorrect. The code shown in the question doesn't fail in the way you describe. So there's little anybody here can do to help with it. **Edit:** *"The error states that "spec is null""* - What error? There's no mention of any error in the question, and the code in the question doesn't produce an error. – David Jul 15 '22 at 12:19
  • Just to confirm, and thank you for your help so far, the javascript does not care about where in the body of the html file the classes are? (both in the body, but not siblings for example). – Seahorse Jul 15 '22 at 12:21
  • The error is when I am running it in browser and then I inspect the console. – Seahorse Jul 15 '22 at 12:23
  • The updated question suggests that the `.specialist` element isn't found when the code runs. [This question](https://stackoverflow.com/q/14028959/328193) is generally the canonical duplicate for that. – David Jul 15 '22 at 12:25
  • Thanks David, unfortunately my script isn't in the body of the HTML. I tried adding the script to the body of the HTML file after the section and it's still not working on the browser. – Seahorse Jul 15 '22 at 12:30
  • Hopefully the information in those answers can at least potentially be used as a starting point. But ultimately it's only a guess, since the code shown in the question demonstrably works as expected. I'm afraid you have some more debugging and investigating to do on your end to narrow down the problem. – David Jul 15 '22 at 12:33
  • Okay I will close the question - I feel as if I understand a little bit more - spec is trying to equal the .specialist class, however for some reason .specialist is non-existent which means that spec is null. The question now becomes: "How do I make that class be seen by js?"./ – Seahorse Jul 15 '22 at 12:34

1 Answers1

0

The answer was to load the script at the very end of the body!

<body>
    <div> What ever 1 2 3 4 <br/> 1 2 3 4</div>
    <img>
    <script src="script.js"></script>
</body>
Seahorse
  • 1
  • 3