JavaScriptでボタンをクリックしてテキストや画像を変更するにはどうすればよいですか?

JavaScript を使用すると、特定の要素に割り当てられたテキストや img 要素で指定された画像を簡単に変更できます。 HTML ドキュメントの button 要素で onclick イベントを使用すると、ボタンがクリックされたときにこのイベントが発生します。クリック時にボタンのテキストを変更するには、必要な変更を実行する値として関数を onclick イベントに割り当てます。

コード例を通じて、JavaScript を使用してテキストと画像を個別に変更する方法について詳しく学びましょう。

要素のテキストを変更する

JavaScript は、HTML ドキュメント内の要素のテキストを変更または取得するための 2 つの異なる属性を提供します。これらの 2 つの属性、その機能および構文は以下にリストされています -

• innerText - JavaScript の innerText プロパティは、HTML ドキュメントから前のテキストを変更したり、選択した特定の要素の前のテキストを取得したりするために使用されます。

＃＃＃文法＃＃＃

次の構文は、innerText プロパティを使用して要素のテキストを取得および変更する方法を示します -

リーリー

• innerHTML

  -innerHTML 属性は、要素のテキストとその内部で使用されているすべてのサブタグを提供するだけでなく、要素のテキストとその内部で使用されているサブタグを新しいテキストに変更します。

  ＃＃＃文法＃＃＃
次の構文は、innerHTML 属性を使用して要素のテキストを取得または変更する方法を示します -

リーリー

コード例の実際の実装を通じて、これら 2 つのプロパティを理解しましょう -

＃＃＃アルゴリズム＃＃＃

ステップ 1

- 最初のステップでは、input 要素を HTML ドキュメントに追加します。このようにして、次の段落のテキストをユーザーが入力したテキストに変更できます。

• ステップ 2 - このステップでは、関数を値として受け取り、ユーザーがボタンをクリックしたときにそれを呼び出す onclick イベントが関連付けられたボタン ラベルを追加します。段落のテキストが変更されます。

• ステップ 3 - 次のステップでは、ユーザーが入力した入力テキストを取得し、innerText プロパティと innerHTML プロパティを使用してテキストを変更する JavaScript 関数を定義します。ページ。

• ＃＃＃例＃＃＃

  次の例では、innerText プロパティと

  innerHTML
プロパティを使用して要素のテキストを変更する方法を説明します -

リーリー

上記の例では、innerText プロパティと innerHTML プロパティを使用して、2 つの異なる段落のテキストを変更しました。前のテキストのテキストは、 innerText プロパティを使用して変更されます。同時に、後のテキストのテキストが innerHTML 属性を使用して変更されます。

ボタンをクリックすると画像を変更します JavaScript を使用して HTML ドキュメント内の要素のテキストを変更する方法について説明しました。いいえ、JavaScript を使用してボタンをクリックするだけで画像を変更する方法について説明します。 JavaScript では、

src

属性を使用して、指定されたリンクの値や、指定された src 属性の img 要素の画像アドレスを変更したり、取得したりすることができます。

＃＃＃文法＃＃＃

次の構文は、

src

属性を使用して Web ページ上の画像を変更する方法を示しています -

リーリー

次に、JavaScript コード例を使用して、src 属性を使用して画像を変更する実際の実装を理解しましょう - ＃＃＃アルゴリズム＃＃＃

ステップ 1

- 最初のステップでは、src 属性にいくつかの初期値を含む img 要素を HTML ドキュメントに追加します。後で使用します。 JavaScript では、src 属性を使用してこの値を変更します。

ステップ 2

- 次のステップでは、ボタンがクリックされたときに関数を呼び出す onclick イベントを持つボタン要素を追加します。

• ステップ 3 - このステップでは、JavaScript 関数を定義し、その ID によって関数内の img 要素を取得します。

• ステップ 4 - 最後のステップでは、src 属性を使用して src 属性の値を変更し、それに新しい値を割り当てて、Web ページ上にいくつかの新しい画像を表示します。ボタンをクリックするたびに、ユーザーは 2 つの画像を切り替えることになります。

• ＃＃＃例＃＃＃

  次の例では、src 属性が新しい値を使用して、src 属性の以前の値と Web ページ上の以前の画像を置き換える方法を説明します - リーリー 上記の例では、src 属性を使用して、img 要素の src 属性値と Web ページ上の実際の画像を変更します。

この記事では、JavaScript を使用して Web ページ上の要素のテキストを変更する 2 つの異なる方法と、Web ページ上の画像を変更する方法を、それぞれのコード例とともに詳しく説明しました。これらの例は、JavaScript の実践的な知識を高めるのに役立ちます。

以上がJavaScriptでボタンをクリックしてテキストや画像を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。