Javascript получить элемент внутри элемента

Я пытаюсь получить элемент внутри тега привязки и установить для него класс CSS, называемый активным, для стилизации конкретного элемента, но я получаю сообщение об ошибке, что элемент не определен. Я не могу понять, в чем проблема.

Я пробовал использовать разные селекторы, такие как featuresLinks.document.querySelectorAll("h3"), но все равно получаю неопределенную ошибку. Я не уверен, какой метод или селектор javascript мне нужно использовать, чтобы получить элемент h3 внутри конкретной ссылки, на которую я нажимаю.

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>

javascript html css

29.03.2022 16:12

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я предлагаю вам делегировать из контейнера

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>

Я немного смущен тем, что делает if (!tgt || !tgt.matches("a")) return;.

— 31.03.2022 12:47

Также я хочу, чтобы класс features-active удалялся из двух других тегов h3, когда я нажимаю на один тег h3. Прошу прощения, если мой вопрос был расплывчатым или неясным.

— 31.03.2022 12:50

Мы выходим из функции, если цель не была найдена ИЛИ цель была найдена (что-то щелкнуло), но это не было A

— 31.03.2022 13:01

См. обновленный ответ

— 31.03.2022 13:09

Спасибо, это заняло некоторое время, но я наконец понял.

— 02.04.2022 14:16

29.03.2022 16:19