'Javascript get element inside an element

I am trying to get an element inside an anchor tag and set a CSS class called active on it to style the particular element, but I am getting an error that the element is undefined. I can't figure out what the issue is.

I tried using different selectors like featuresLinks.document.querySelectorAll("h3"), but I still get the undefined error. I am not sure what javascript method or selector I need to use to get the h3 element inside the specific link I click on.

let featuresLinks = document.querySelectorAll(".features-link");

featuresLinks.forEach(featuresLink => {
    featuresLink.addEventListener("click", function(e){
        e.preventDefault();
        active();
    })
})

function active(){
    let featuresLinkHeading = featuresLinks.firstChild;
    if(!featuresLinkHeading.classList.contains("features-active")) {
        featuresLinkHeading.classList.add("features-active")
    }
};
:root {
    --primary-blue: hsl(231, 69%, 60%);
    --primary-red: hsl(0, 94%, 66%);
    --neutral-blue-100: hsl(229, 8%, 60%);
    --neutral-blue-900: hsl(229, 31%, 21%);
    --neutral-100: hsl(0, 0%, 100%);
    --neutral-900: hsl(0, 0%, 0%); 
}

.features a {
    text-decoration: none;
    color: var(--neutral-blue-100);
    font-size: 19.5px;
    font-weight: 400;
}

body {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    margin: 0%;
    text-align: center;
}

.features-border::after {
    content: ""; 
    display: block; 
    margin: 0 auto; 
    width: 52%;
    padding-top: .85em; 
    border-bottom: 4px solid var(--neutral-100); 
}

.features-border.features-active::after {
    content: "";  
    display: block; 
    margin: 0 auto; 
    width: 52%; 
    padding-top: .85em; 
    border-bottom: 4px solid var(--primary-red);
}

a .features-active {
    color: var(--neutral-blue-900);
}
<body>

    <section>
        <div class="content features">
            <h2>Features</h2>
            <p>Our aim is to make it quick and easy for you to access your favourite websites.
            Your bookmarks sync between your devices so you can access them on the go.</p>
            <hr>
            <a class="features-link" href="">
                <h3 class="features-border features-active">Simple Bookmarking</h3>
            </a>
            <hr>
            <a class="features-link" href="">
                <h3 class="features-border">Speedy Searching</h3>
            </a>
            <hr>
            <a class="features-link" href="">
                <h3 class="features-border">Easy Sharing</h3>
            </a>
            <hr>
            
        </div>
    </section>

</body>
javascripthtmlcss


Solution 1:[1]

I suggest you delegate from the container

window.addEventListener('DOMContentLoaded', () => { // when page has loaded
  const container = document.querySelector('.features');
  const featureLinks = container.querySelectorAll('a.features-link');
  container.addEventListener("click", function(e) {
    const tgt = e.target.closest("a");
    if (!tgt || !tgt.matches("a")) return; // we did not click a link or a child of a link
    e.preventDefault();
    const tgtHeader = tgt.querySelector('h3');
    featureLinks.forEach(link => {
      const header = link.querySelector('h3');
      header.classList.toggle('features-active', header === tgtHeader); // toggle off unless clicked
    });
  });
});
:root {
  --primary-blue: hsl(231, 69%, 60%);
  --primary-red: hsl(0, 94%, 66%);
  --neutral-blue-100: hsl(229, 8%, 60%);
  --neutral-blue-900: hsl(229, 31%, 21%);
  --neutral-100: hsl(0, 0%, 100%);
  --neutral-900: hsl(0, 0%, 0%);
}

.features a {
  text-decoration: none;
  color: var(--neutral-blue-100);
  font-size: 19.5px;
  font-weight: 400;
}

body {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  margin: 0%;
  text-align: center;
}

.features-border::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 52%;
  padding-top: .85em;
  border-bottom: 4px solid var(--neutral-100);
}

.features-border.features-active::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 52%;
  padding-top: .85em;
  border-bottom: 4px solid var(--primary-red);
}

a .features-active {
  color: var(--neutral-blue-900);
}
<section>
  <div class="content features">
    <h2>Features</h2>
    <p>Our aim is to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go.</p>
    <hr>
    <a class="features-link" href="">
      <h3 class="features-border features-active">Simple Bookmarking</h3>
    </a>
    <hr>
    <a class="features-link" href="">
      <h3 class="features-border">Speedy Searching</h3>
    </a>
    <hr>
    <a class="features-link" href="">
      <h3 class="features-border">Easy Sharing</h3>
    </a>
    <hr>
  </div>
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions