CodePen Embed - Standard Events: The change Event

<h2>Today is <span id="day" class="highlight">Sunday</span></h2>
<form>
  <select id="days">
    <option value="Sunday">Sunday</option>
    <option value="Monday">Monday</option>
    <option value="Tuesday">Tuesday</option>
    <option value="Wednesday">Wednesday</option>
    <option value="Thursday">Thursday</option>
    <option value="Friday">Friday</option>
    <option value="Saturday">Saturday</option>
  </select>
</form>

html, body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  
  width: 100%;
  height: 100%;
}

.highlight {
  display: inline-block;
  padding: 5px;
  background-color: #e00;
  color: #fff;
}

const days = document.getElementById('days')
const day = document.getElementById('day')

days.addEventListener('change', function () {
  day.textContent = days.value
})

This Pen is owned by IMD on CodePen.

See more by @IMD on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.