チェックボックスがチェックされた時に背景色を変更したい

Question

チェックボックスにチェックを入れた時に、label属性の背景色を変更したいです。
現在、以下のような形で実装を試みています。

※label内のチェックボックスは複数実装しています。

<div id="modal-content">
<input type="text" id="keyword" name="keyword" size="30" disabled="disabled"/>
   <div id="material_select">
      <div class="all-container">
        <div id="check-label-container">
          <label class="check-label">
            <span>テスト1</span>
            <input type="checkbox" name="check" value="テスト1">
            <span class="checkmark"></span>
          </label>
        </div>
      </div>
   </div>
</div>

<script>
window.onload = function() {
	var buttons = document.getElementById('material_select').getElementsByTagName('input');
	console.log('確認');
	for ( var i = 0; i < buttons.length; i ++ ) {
		console.log(buttons[i]);
		buttons[i].onclick = function() {
			console.log('確認2');
			var keyword = document.getElementById('keyword');
			console.log('確認3');
			if(this.checked) {
				keyword.value += this.value + "　";
				console.log('確認4');
				buttons[i].parentNode.style.backgroundColor = '#CC28A8';
			} else {
				keyword.value = keyword.value.replace(new RegExp(this.value + "　","g"),"");
			}
		}
	}
}
</script>

コンソールでは確認4まで出力された後に、以下のメッセージが出力されています。

Uncaught TypeError: Cannot read property 'parentNode' of undefined
    at HTMLInputElement.buttons.(/anonymous function).onclick

getElementsByTagNameの戻り値がリストなのでparentNodeでは親要素を取得できていないのかなというところまでは何となく分かったのですが、どのように対処すれば良いのかがいまいち分かりません...

どなたかご教授お願い致します。

Comments

[kei344]

関数ChangeColorを使用しているところを含めて提示してください。

[HayatoKamono]

デバッグは今回もしていないのでしょうか？
https://teratail.com/questions/123849

[m.ts10806]

ChangeColor()　はどこで呼び出しているのでしょうか？

[science_mac]

大変失礼しました、回答遅くなり申し訳ありません。 ChangeColor()についてはチェックボックスのonclickで呼び出していたので追記しました。 ただこれだとチェックを消した時にも反応しちゃうので良くないですね...

[m.ts10806]

例えばonchangeとかでもチェック有無は判定しないといけないので同じです

[m.ts10806]

あとデバッグを癖にしないと問題解決は遅くなるばかりです。質問せずに自身で完結できればそれに越したことはないですよね？

[science_mac]

対応できておらず、大変申し訳ありません。質問内容の変更やデバック内容の追記などを実施したため、再度確認して頂けると嬉しいです。

[kei344]

すでに付いている回答は確認されていますか？

[science_mac]

すみません、確認して回答しました。少し実装変えてしまったため、ご指摘の方法ではうまく動かなくなってしまったので代替方法を考え中です。

Answer 1

getElementsByTagName() の戻り値はリストなので、添字がないとダメなんじゃないかと。

Myid=document.getElementById('material_select').getElementsByTagName('input')[0];

Comments

[science_mac]

ご回答ありがとうございます。
実装方法を少し変えてしまった結果、教えていただいた方法ではそもそも動かなくなってしまいました。（コンソールで"確認"までしか表示されない）

ですが、戻り値がリストであるということはかなり大きなヒントになりそうです。
ありがとうございます。

Answer 2

iをonclick に登録した関数内で使用するにはいくつか方法はありますが、let i = 0;とするのが一番手っ取り早いのでそうしてあります。（ちなみにチェックボックスが外れたときに色を戻す処理は実装されていないままです）

window.onload = function() {
    var buttons = document.getElementById('material_select').getElementsByTagName('input');
    console.log('確認');
    for ( let i = 0; i < buttons.length; i ++ ) {
        console.log(buttons[i]);
        buttons[i].onclick = function() {
            console.log('確認2');
            var keyword = document.getElementById('keyword');
            console.log('確認3');
            if(this.checked) {
                keyword.value += this.value + "　";
                console.log('確認4');
                buttons[i].parentNode.style.backgroundColor = '#CC28A8';
            } else {
                keyword.value = keyword.value.replace(new RegExp(this.value + "　","g"),"");
            }
        }
    }
}
```**動くサンプル：**[https://jsfiddle.net/wL8hgakj/](https://jsfiddle.net/wL8hgakj/)

Comments

[science_mac]

ご回答及び対応についての指摘ありがとうございます。
期待通りの動きを実装できました。

ブロックスコープについては知識が足りておりませんでした。
今回の指摘を機に押さえておきたいと思います。
本当にありがとうございました。