質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

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

Keisuke_NUT
Keisuke_NUT

総合スコア3

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0グッド

1クリップ

398閲覧

投稿2022/10/13 01:19

前提

こんにちは。
現在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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/10/13 01:33

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

回答2

1

ベストアンサー

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

Qreform.addEventListener('click', で登録したイベントリスナは、Qreform 内のあらゆる要素がクリックされたときに呼ばれます。つまり、<select> がクリックされたときも呼ばれ、そのときは変数 radionull になる可能性があります。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

総合スコア17111

m.ts10806👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

おそらく、radionullになっています。

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

投稿2022/10/13 01:36

maisumakun

総合スコア141388

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。