Select input events

by kmouse

HTML

<div id="wrap">
	<select id="select">
		<option>Hello</option>
		<option>world</option>
		<option>Where</option>
		<option>Are</option>
		<option>Thou</option>
	</select>
</div>

<ol>
	<li id="wrap_input"></li>
	<li id="wrap_change"></li>
	<li id="select_input"></li>
	<li id="select_change"></li>
	<li id="value_background"></li>
</ol>

CSS

ol {
	margin-top: 400px;
}

JavaScript

const wrap = document.getElementById("wrap");
const select = document.querySelector("select");
const wrap_input = document.getElementById("wrap_input");
const wrap_change = document.getElementById("wrap_change");
const select_input = document.getElementById("select_input");
const select_change = document.getElementById("select_change");
const value_background = document.getElementById("value_background");

wrap.addEventListener("input", function(e) {
  wrap_input.textContent = e.target.value;
});
wrap.addEventListener("change", function(e) {
  wrap_change.textContent = e.target.value;
});
select.addEventListener("input", function(e) {
  select_input.textContent = e.target.value;
});
select.addEventListener("change", function(e) {
  select_change.textContent = e.target.value;
});
setInterval(function() {
  value_background.textContent = select.value;
}, 50);

function cancelChange(e) {
	e.preventDefault();
	return false;
}