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.
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>