控制 id 与 javascript 中的 href 匹配的元素

Question

I am trying to achieve a simple show/hide content by clicking outside of some links. I can achieve it with jQuery . But, I am struggling to achieve that with vanilla javascript. Basically, I get the id from a like this way:

const id = e.target.getAttribute('href');

Now, I want to work with that id , but I can't. So, my problem is in this line:

id.classList.remove('hidden');

My demo:

 const texts = document.querySelectorAll('.content p > span'); const links = document.querySelectorAll('.link-block a'); links.forEach(el => { el.addEventListener('click', e => { texts.forEach(text => text.classList.add('hidden')); const id = e.target.getAttribute('href'); //console.log(id); id.classList.remove('hidden'); }); });

 .hidden { display: none; }

 <section> <section class="content"> <p> <span id="content-1">Sample Text for Content 1.</span> <span id="content-2" class="hidden">Sample Text for Content 2.</span> <span id="content-3" class="hidden">Sample Text for Content 3.</span> </p> </section> <section class="link-block"> <a href="#content-1">Content 1</a> <a href="#content-2">Content 2</a> <a href="#content-3">Content 3</a> </section> </section>

Answer 1

The id value is a string, not an element. But that string can be used with document.querySelector to find that element. For example:

 const texts = document.querySelectorAll('.content p > span'); const links = document.querySelectorAll('.link-block a'); links.forEach(el => { el.addEventListener('click', e => { texts.forEach(text => text.classList.add('hidden')); const id = e.target.getAttribute('href'); //console.log(id); document.querySelector(id).classList.remove('hidden'); }); });

 .hidden { display: none; }

 <section> <section class="content"> <p> <span id="content-1">Sample Text for Content 1.</span> <span id="content-2" class="hidden">Sample Text for Content 2.</span> <span id="content-3" class="hidden">Sample Text for Content 3.</span> </p> </section> <section class="link-block"> <a href="#content-1">Content 1</a> <a href="#content-2">Content 2</a> <a href="#content-3">Content 3</a> </section> </section>