JavaScript

Yubinbango.jsを導入の際に「Uncaught TypeError: Cannot read properties of null (reading ‘innerHTML’)」のエラーで動かなかったときの対処法

Yubinbango.jsを導入の際に「Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')」のエラーで動かなかったときの対処法
ENOWL_Nao

どうも、こんにちは。
Webデザイナーのなお(@ENOWL_Nao)です。

先日、Yubinbango.jsをフォームに導入する際に以下のエラーで動きませんでした。

Uncaught TypeError: Cannot read properties of null (reading ‘innerHTML’)

理由は簡単で導入する際に手順が1つ抜けていたことが原因でした。
将来的にまた自分がやらかした時のためにメモとして残しておきます。

同じような症状になった人の参考になれば嬉しいです。

この記事の見出し
  1. 解決方法
  2. 原因
  3. まとめ

解決方法

h-adrのclassをセットしたform要素内に以下の記述を追加する。

1<span class="p-country-name" style="display:none;">Japan</span>

解決しましたか?

原因

本来、h-adrのclassをセットしたformかdiv要素内に上記の記述を追加しなければいけないのに抜けていました。

自分では、手順通りに設定していたつもりだったので解決までに時間がかかってしまいました。

まとめ

Yubinbango.jsで「Uncaught TypeError: Cannot read properties of null (reading ‘innerHTML’)」のエラーが出た時の対処法のご紹介でした。

まさか手順が抜けているとは思わず、コンソールのエラー内容で調べても記事が引っかからなかったので悩みました。

同じようなエラーにハマった人(あんまりいないと思うけど…)の参考になれば嬉しいです。

ここまで読んでいただきありがとうございました!

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります!
個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか?

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか?

私について
なお
なお
Webデザイナー
ホームページをご覧いただきありがとうございます! なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
記事URLをコピーしました