0

Имеется такой код, текст которого меняется динамически:

<ul id="color-values">
    <li><label>HEX:</label><span id="hex">#FF0000</span></li>
</ul>

введите сюда описание изображения

Как мне отследить событие с помощью javascript, которое вызывается когда содержимое текста меняется?

2 ответа 2

0

Вот так )

const hex = document.getElementById('hex');

hex.addEventListener('DOMSubtreeModified', () => {
  console.log('change');
})

function changeColor() {
  hex.textContent = '#' + Math.floor(Math.random() * 16777215).toString(16);
}
#hex {
  text-transform: uppercase;
}
<ul id="color-values">
  <li><label>HEX:</label><span id="hex">#FF0000</span></li>
</ul>

<button onclick="changeColor()">Change</button>

2
  • Большое спасибо, работает 18 ноя 2022 в 12:36
  • 1
    DOMSubtreeModified - устаревший метод, вместо него используйте аналог в виде MutationObserver более современный и быстрый.
    – ΝNL993
    18 ноя 2022 в 19:35
0

Да, можно для отслеживания использовать MutationObserver, DOMSubtreeModified. Но зачем вообще отслеживать? Не проще ли событие по изменению содержимого повесить на то же самое событие, которое и вызывает это изменение? Т. е., другими словами, переписать функцию changeColor() таким образом:

function changeColor() {
  hex.textContent = '#' + Math.floor(Math.random() * 16777215).toString(16);
  console.log('change');
}

И без лишней заморочки.

Ещё не забываем, что toString(16) не приводит к корректному переводу из десятичной в шестнадцатеричную системы для задавания цвета, так как если код составляющей цвета получается меньшим, чем hex 10, то нужно впереди дописывать "0".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.