При клике на любое слово из абзаца оно выделялось красным цветом

Question

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

Работа с li, input и прочими не вызывает вопросов, так как там можно юзать querySelectorAll. А вот с текстом проблемы возникла) Мой код таков (в нем все неправильно, но все же):

let p = document.querySelector("p"); // Получаю доступ к P
p.addEventListener("click", function() { // здесь уже ошибка - я обрабатываю клик по параграфу, а надо по слову:D
  let pText = document
    .querySelector("p")
    .innerText.split(" ") // получаю массив с текстом из параграфа и пытаюсь его перебрать 
    .forEach(
      (word) => ((p.innerHTML = word), (p.style.color = "red")) // Белеберда, в которой я пытался.... добавить слово в параграф... и покрасить параграф в красный цвет. Ну что написал, то и получил) 
    );
});

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa quod nostrum nemo, quis ipsum officiis cum id, placeat temporibus soluta tenetur consequatur illum vel autem assumenda corrupti dolor molestias consectetur!
</p>

есть мысль переебрать с помощью for of, но проблемы это не решит. Буду пробовать, пока жду ответа от гуру)

Answer 1

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

Попробую разбить задачу на части

А. "Красным цветом выделялось" — Это можно сделать через CSS. Мы создадим класс, который будет изменять цвет текста на красный, и будем добавлять или убирать этот класс при клике на слово.

.red { color: red; }

Б. "Каждое слово" — Нам нужно разделить текст абзаца на отдельные слова, чтобы кликать на каждое из них отдельно. Для этого можно воспользоваться методом split(" "), который разделит текст по пробелам.

const words = p.innerText.split(" ");

В. "Из абзаца" — Нам нужно работать с текстом внутри параграфа. Сначала получаем доступ к абзацу через document.querySelector или getElementById.

const p = document.getElementById("text");

Г. "Из массива слов" — После того как текст абзаца разбит на массив слов, нам нужно обернуть каждое слово в элемент span, чтобы сделать его кликабельным. Затем, для каждого слова мы добавляем обработчик события click, который будет переключать класс .red

words.forEach((word) => { const span = document.createElement("span"); span.innerText = word + " "; // добавляем пробел после слова span.addEventListener("click", function () { this.classList.toggle("red"); // переключаем класс при клике }); p.appendChild(span); // добавляем слово обратно в параграф });

Ж. ...еще надо добавить проверки, что это слово, а не тире к примеру, но тк в задаче об этом не говорится(там только слова, или еще что то), то и проверок не делаем...

const p = document.getElementById("text");
const words = p.innerText.split(" "); // Разбиваем текст на слова
p.innerHTML = ""; // Очищаем содержимое параграфа

// Проходим по каждому слову
words.forEach((word) => {
  const span = document.createElement("span"); // Создаем элемент span для каждого слова
  span.innerText = word + " "; // Добавляем слово и пробел после него
  span.addEventListener("click", function() {
    this.classList.toggle("red"); // Переключаем класс "red" при клике
  });
  p.appendChild(span); // Добавляем слово (в виде span) в параграф
});

.red {
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

</head>

<body>
  <p id="text">
    Знаешь, чем интересен StackOverflow? Это словно огромная библиотека, где любой вопрос уже почти наверняка кем-то решен. Ты задаешь вопрос — и вот он, готовый ответ, решение под рукой. Это, конечно, экономит время и силы, но иногда стоит остановиться и
    подумать: а что происходит с твоими навыками? Ты уже стараешься сам, это видно. Ты пробуешь разные подходы, экспериментируешь с кодом. Это очень важно. Но есть моменты, когда ты спотыкаешься — и вот Тут нужно просто чуть глубже копнуть и подумать
    о том, как манипулировать каждым отдельным элементом текста. Иногда решения кажутся близкими, но из-за мелких деталей не приходят сразу. Это нормально, и все через это проходят. Именно такие моменты, когда что-то не получается с первого раза, — самые
    ценные для роста. Удовольсвтвие от проделанной задачи самостоятельно не сравнимо. Да, это может быть сложно, но ведь именно этот процесс — поиск, анализ, пробование нового — помогает тебе становиться лучше. StackOverflow — отличный инструмент, но
    твой прогресс еще более впечатляющий, когда ты идешь дальше, копаешь вглубь проблемы, сам ищешь решения. Каждый раз, когда тебе хочется задать вопрос, остановись на минуту и подумай: что я еще не попробовал? Ведь ты уже близок к тому, чтобы самостоятельно
    разобраться. Ты уже на правильном пути. всего лишь чуть больше настойчивости — и ты сам найдешь ответы, которые ищешь.
  </p>


</body>

</html>

БЛОГ НА HUSL

При клике на любое слово из абзаца оно выделялось красным цветом

Ответы (1 шт):