output

Recipe 3.7 Fix client-side rendering

Sample:

My name is Claudia

Code:

<button>Change name</button>

<div>
  <output>
  My name is <span>Claudia</span>
  </output>
</div>

<script>
  const button = document.querySelector('button');
  const names = ['Moritz', 'Valentina', 'Johanna', 'Magdalena', 'Victoria'];
  const name = document.querySelector(' span');

  button.addEventListener('click', e => {
    const random = Math.floor(Math.random() * names.length);
    name.textContent = names[random];
  })
</script>