role status

Recipe 3.7 Fix client-side rendering

Sample:

My name is Claudia

Code:

<button>Change name</button>

<div role="status">
 My name is <span>Claudia</span>
</div>

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

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