【JavaScript】changeイベントの使い方について徹底解説

▼トリガーになる要素を取得(addEventListenerとonchangeプロパティで使用)
const sample = document.getElementById('sample'); // トリガーになる要素を取得

▼addEventListenerメソッド
sample.addEventListener('change',function(){　// 第一引数にchangeを指定
  // 処理を記述
});

▼onchangeプロパティ
sample.onchange = function(){
  // 処理を記述
};

▼onchange属性
<select onchange="changeEvent()">
	<option value="リスト1" selected>リスト1</option>
	<option value="リスト2">リスト2</option>
	<option value="リスト3">リスト3</option>
</select>

<script>
function changeEvent(){
  // 処理を記述
};
</script>

<input id="sample-input" type="text" placeholder="任意の文字を入力してください">
<p>テキストボックスに入力した文字は「<span id="sample-output"></span>」です。</p>

<script>
window.addEventListener('DOMContentLoaded',function(){
  sampleInput = document.getElementById('sample-input');
  sampleOutput = document.getElementById('sample-output');
  sampleInput.addEventListener('change',textGet,false);

  function textGet(){
    sampleOutput.textContent = this.value;
  }
});
</script>

<label>
  <input type="checkbox" id="input-checkbox" name="sample-box">
		チェックボックスをクリックして切り替えよう！
</label>
<p>チェックボックスの状態：<span id="output-checkbox"></span></p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  inputCheckbox = document.getElementById('input-checkbox');
  outputCheckbox = document.getElementById('output-checkbox');
  inputCheckbox.addEventListener('change',checkboxStatus,false);

  function checkboxStatus(){
    if(this.checked){
      outputCheckbox.textContent = "チェック済";
    } else {
      outputCheckbox.textContent = "未チェック";
    }
  }
});
</script>

<select id="input-select" name="lists">
  <option value="リスト1">リスト1</option>
  <option value="リスト2">リスト2</option>
  <option value="リスト3">リスト3</option>
</select>
<p>選択されているのは「<span id="output-select"></span>」です。</p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputSelect = document.getElementById('input-select');
  const inputOptions = inputSelect.options;
  const outputSelect = document.getElementById('output-select');
  inputSelect.addEventListener('change',selectStatus,false);
  
  function selectStatus(){
    for(let i = 0; i < inputOptions.length; i++){
      if(inputOptions[i].selected){
        outputSelect.textContent = inputOptions[i].value;
      }
    }
  }
});
</script>

<form id="input-radio">
	<input name="sample-list" type="radio" value="ラジオボタン1"> ラジオボタン1
	<input name="sample-list" type="radio" value="ラジオボタン2"> ラジオボタン2
	<input name="sample-list" type="radio" value="ラジオボタン3"> ラジオボタン3
</form>
<p>選択されているのは「<span id="output-radio"></span>」です。</p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputRadio = document.getElementById('input-radio');
  const sampleList = document.getElementsByName('sample-list');
  const outputRadio = document.getElementById('output-radio');
  inputRadio.addEventListener('change',radioStatus,false);
  
  function radioStatus(){
    for(let i = 0; i < sampleList.length; i++){
      if(sampleList[i].checked){
        outputRadio.textContent = sampleList[i].value;
      }
    }
  }
});
</script>