Javascript function does not start if browser does it quickly

The answer is Esper, but I interpreted the question with a strong imagination.

• JavaScript functionality does not work when you operate the pulldown menu that has JavaScript functionality immediately after the page is displayed.

'use strict';
document.addEventListener('DOMContentLoaded', function(event){
  event.target.querySelectorAll('#sampleselect').forEach(function(select){
    select.addEventListener('change', function(event){
      console.log(event.target.value);
    }, false);
  });
}, false);

<p>(...huge amount of content...)</p>

<form id="sample">
  <p>
    <select name="alphabet">
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </select>
  </p>
  <p>
    <select name="number">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </p>
</form>

<p>(...huge amount of content...)</p>

Wait for the previous code to run until DOMContentLoaded.
Therefore, JavaScript functionality may not work until DOMContentLoaded fires, and the output to console.log may not work if you select a select element immediately after viewing a web page.
JavaScript DOM references work only after DOM is built, so DOM construction needs to be done first.
Therefore, static HTML+JavaScript is not fully compatible with the operation immediately after display.

There are two main countermeasures.

• Unable to operate until JavaScript features are applied
• Generate Element Nodes in JavaScript

The former gives the element the disabled attribute to create an inoperable situation.
The latter dynamically generates nodes with APIs such as createElement, defines the event, and inserts the node to accommodate the immediate action.

Re:@hosayu