Blocking JavaScript

by sbjami

HTML

<body>
  <h1>Blocking JavaScript</h1>
  <button>
    I'll block
  </button>
  <p>
    New text below this
  </p>
</body>

CSS

button {
  color: red;
}

JavaScript

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  // Function execution stops here until user
  // interacts with the alert
  alert('You clicked me!');

  // Code proceeds here once user has interacted with the alert
  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});