Использование .replace () в eventListener для изменения текста, не может заставить его работать

Question

Я пытаюсь понять, как методы и регулярные выражения работают в HTML. В общем, все, что я хочу сделать, это ... Когда я нажимаю кнопку, я хочу использовать метод .replace (REGEXP), чтобы изменить слово «изменить» на «держать» в абзаце выше.

Может кто-нибудь объяснить мне, почему это не работает? Я все еще довольно новичок в этом ...

 let x = document.getElementById('change').innerHTML;
   let button = document.getElementById('button');
   button.addEventListener('click', function() {
      x = document.getElementById('change').innerHTML.replace(/change/g, 'keep');
   });

<p id="change">Here's an example sentence we want to change</p>
<button id="button">Change</button>

  

Даже не уверен, что это возможно, но, возможно, кто-то может указать мне правильное направление. Thankyou!

Answer 1

Используйте это

document.getElementById('change').innerHTML = x.replace(/change/g, 'keep');

вместо

x = document.getElementById('change').innerHTML.replace(/change/g, 'keep');

Answer 2

Вы присваиваете измененный текст переменной x, которая в точности равна string. Это не ссылка.
Вы должны использовать element.innerHTML = 'some inner content'.

 const targetElement = document.getElementById('change');
 let button = document.getElementById('button');
 button.addEventListener('click', function() {
    targetElement.innerHTML = targetElement.innerHTML.replace(/change/g, 'keep');
 });

<p id="change">Here's an example sentence we want to change</p>
<button id="button">Change</button>