HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでエラー発生時にスクリプトを実行する方法｜onerrorイベントの使い方を解説

HTMLでは、onerrorイベント属性を使うことで、エラーやリソースの読み込み失敗が発生した際にJavaScriptのスクリプトを自動的に実行できます。特に画像や外部ファイルが正しく読み込めなかった場合のエラーハンドリングに便利です。

onerrorイベントとは

onerrorイベントは、対象の要素（imgタグなど）でエラーが発生したときにトリガーされます。例えば、指定した画像ファイルが存在しない、パスが間違っている、ネットワークの問題で読み込めないといったケースで発火します。

onerrorイベントの実装例

以下のコードは、画像の読み込みに失敗した場合にアラートを表示するシンプルなサンプルです。

<!DOCTYPE html>
<html>
   <body>

      <img src = "new.png" onerror = "display()">
      <p>画像が正しく読み込まれなかった場合、アラートが表示されます。</p>

      <script>
         function display() {
            alert("画像の読み込みに失敗しました。");
         }
      </script>
   </body>

</html>

コードの解説

  • onerror = "display()"：img要素にonerror属性を設定し、エラー発生時にdisplay()関数を呼び出します。
  • display()関数：アラートで「画像の読み込みに失敗しました」というメッセージを表示します。

onerrorイベントの活用シーン

onerrorイベントは、以下のような場面で活用できます。

  • 代替画像の表示： 読み込みに失敗した画像の代わりに、プレースホルダー画像を表示する。
  • ユーザーへの通知： コンテンツが表示できないことをアラートやメッセージで伝える。
  • ログ収集： エラーの発生状況をサーバーに送信し、品質管理に役立てる。

このように、onerrorイベント属性を活用することで、リソース読み込みの失敗に対して柔軟かつユーザーフレンドリーな対応が可能になります。ぜひ実際のWebサイト開発で試してみてください。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実