jsでif文の条件の追加

Question

全ページにjsやjqueryの処理を記述して読み込んでるファイルがあります。
hoge.htmlのh2の文章を切り替えたく、js-h2の要素を取得して切り替えしたはいいのですが、hoge.html以外のhtmlでjs-h2の要素がないため、以下のコンソールエラーが発生してます。

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

こちらをhoge.htmlのみ以下の処理が適用できるようにしたいです。

document.addEventListener('DOMContentLoaded', function() {
  
  if (window.matchMedia( '(min-width: 992px)' ).matches) {
  const targetElement = document.querySelector('.js-h2');
  const HtmlDoc = `
  text
  `;
  targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
  }else {
  const targetElement = document.querySelector('.js-h2');
  const HtmlDoc = `
  text2
  `;
  targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
  }
});

行いたいこと
if文でhoge.htmlのみh2の文章が992px以上の幅になったとき別のテキストを表示するようにしたい。

  let url = location.pathname;
  if (url.endsWith("/hoge.html")){
条件を下記ついか

document.addEventListener('DOMContentLoaded', function() {
  
  if (window.matchMedia( '(min-width: 992px)' ).matches) {
  const targetElement = document.querySelector('.js-h2');
  const HtmlDoc = `
  text
  `;
  targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
  }else {
  const targetElement = document.querySelector('.js-h2');
  const HtmlDoc = `
  text2
  `;
  targetElement.insertAdjacentHTML('beforeend', HtmlDoc);
  }
});

Comments

[ku__ra__ge]

私のエスパー能力では質問者さんの意図を読み解くことができませんでした。
どんなコードを使って、どんな結果を期待したが、実際にはどうなったかを具体的に書いてください。

[int32_t]

状況を他人にもわかるように説明していただきたいです。

> 他ページでコンソールエラーになるので

「他ページ」ということは2つ以上のページが存在するはずなので、それらが何なのか説明しましょう。どういうエラーになるのか具体的に書きましょう。
例: class="js-h2" の要素が〜のページはあるが〜のページにはない。〜のページでは〜というエラーが出るので、それを解決したい

> if文にどう条件入れていいかわからないのと、うまくいかないので

if によってどういう判定をしたいのか、判定結果でどういう処理分けをしたいのか書きましょう。

Answer 1

質問文の最後のコードの最後に } を追加すればご希望の動作になるように見えます。

Comments

[nanashissss]

ありがとうございます