textのイベント処理がうまくできません

前提

こんにちは。
現在web開発の勉強をしており、HTML,CSS,JavaScriptを使用して簡単なwebページの作成を行っています。

実現したいこと

テキストボックスに入力された文字列を右のセルに表示させる機能の実装(文字入力・削除するたびに更新)。

発生している問題・エラーメッセージ

Google デベロッパーツールのコンソール表示(プルダウンから選択したときのみ発生)。
エラーは出るが、右側セルには選択した項目が正しく表示される。

22331787.js:14 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at HTMLFormElement.<anonymous> (22331787.js:14:22)

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <title>questionnaire</title>
5  <link rel="stylesheet" type="text/css" href="22331787_Q1.css" />
6  <script type="text/javascript" src="./22331787.js"></script>
7</head>
8<body>
9  <form id="Qreform">
10    <table>
11      <caption>研修先希望調査 </caption>
12      <tr>
13        <th> 派遣先</th>
14        <td>
15          <select name="country" >
16            <option value="台湾" />台湾
17            <option value="シンガポール" />シンガポール
18            <option value="フィリピン" />フィリピン
19          </select>
20        </td>
21        <td id="disp1"></td>
22      </tr>
23      <tr>
24        <th>日程</th>
25        <td>
26          <label>
27              <input type="radio" name="schedule" value="Mar" id="r"/>3月
28          </label>
29          <label>
30            <input type="radio" name="schedule" value="Aug" id="r"/>8月
31          </label>
32          <label>
33            <input type="radio" name="schedule" value="Dec" id="r"/>12月
34          </label>
35        </td>
36        <td id="disp2"></td>
37      </tr>
38      <tr>
39        <th>宿泊施設</th>
40        <td>
41          <input type="checkbox" name="place" value="A-HOTEL" id="c1"/>
42          <label for="c1" class="l1">A-HOTEL</label>
43          <input type="checkbox" name="place" value="B-HOTEL" id="c2"/>
44          <label for="c2" class="l1">B-HOTEL</label>
45          <input type="checkbox" name="place" value="C-RESORT" id="c3"/>
46          <label for="c3" class="l1">C-RESORT</label>
47        </td>
48        <td id="disp3"></td>
49      </tr>
50      <tr>
51        <th>予算</th>
52        <td>
53          <input type="text" name="b1" id="budget">円
54        </td>
55        <td id="disp4"></td>
56      </tr>
57
58      <tr>
59        <td colspan="3">
60          <input type="submit" name="sendbutton" value="送信" id="button" />
61        </td>
62      </tr>
63    </table>
64  </form>
65
66</body>
67</html>
68

JavaScript
1window.addEventListener('DOMContentLoaded', function(){
2  /// プルダウンメニュー
3  let select = document.querySelector('[name="country"]');
4  /// 表示
5  var show1 = document.getElementById('disp1');
6  select.onchange=event=>{
7    show1.innerText = select.value;
8  }
9  const Qreform = document.getElementById('Qreform');
10  /// ラジオのクリックイベントを取得
11  Qreform.addEventListener('click', function(){
12    /// 選択された要素内テキスト取得
13    var radio = document.querySelector('[name="schedule"]:checked');
14    var text = radio.parentNode.innerText;
15    /// 右側セルに表示
16    var show2= document.getElementById('disp2');
17    show2.innerText = text;
18  });
19  Qreform.addEventListener('change', function(){
20    let chb = document.querySelectorAll('input[name="place"]:checked');
21    let out=[];
22    chb.forEach((checkbox) => {
23      out.push(checkbox.value);
24    });
25    var show3 = document.getElementById('disp3');
26    show3.innerText = out;
27  });
28  Qreform.addEventListener('onkeyup', function(){
29    let txt = document.querySelectorAll('input[name="b1"]');
30    let out=[];
31    chb.forEach((text) => {
32      out.push(text.value);
33    });
34    var show = document.getElementById('disp4');
35    show4.innerText = out;
36  });
37});
38

試したこと

・ドロップダウンリストのエラーについて、parentNodeなど別のエレメントに変えてみたが結果は同じ。
・テキストボックスに入力された値が右側セルに表示されない事象について、イベントリスナーのタイプを'change'や'onkeydown'などに変更したが、結果は同じ。

補足情報（FW/ツールのバージョンなど）

・エディターはAtomを利用
・HTMLのバージョンは5

m.ts10806

2022/10/13 01:33

formのclickイベントというのが違和感があるのですが、中身の入力コントロール自体に設けないのはどうしてでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')

Qreform.addEventListener('click', で登録したイベントリスナは、Qreform 内のあらゆる要素がクリックされたときに呼ばれます。つまり、<select> がクリックされたときも呼ばれ、そのときは変数 radio が null になる可能性があります。click イベントリスナでラジオボタンがクリックされてないケースを除外してもいいですが、<select> の処理もラジオボタンの処理もチェックボックスの処理も1つのイベントリスナでやってしまえばいいでしょう。
例:

js
1Qreform.addEventListener('change', function(event) {
2  if (event.target.name == "country") {
3    // プルダウンの処理
4  } else if (event.target.name == "schedule") {
5    // ラジオボタンの処理
6  } else if (event.target.name == "place") {
7    // チェックボックスの処理
8  }
9});

テキストボックスに入力された値が右側セルに表示されない事象について、

addEventListener() の引数のイベント名に on は不要です。
イベントリスナに未宣言の chb という変数が使われています。
マウスでペーストした場合などを考えると、keyup イベントで処理するのは不適切です。input イベントがよいでしょう。

投稿2022/10/13 01:39

編集2022/10/13 01:48

int32_t

総合スコア20841

おそらく、radioがnullになっています。

1つもラジオボタンを選択していない場合、document.querySelector('[name="schedule"]:checked')では何も取れませんので、「デフォルトでどれかのラジオボタンを選択しておいて、ユーザー操作で外せないようにする」あるいは「取り損なってnullとなりうることを前提にコードを書く」のどちらかの対応が必要となります。

投稿2022/10/13 01:36