JavaScript ボタンをクリックしてインターフェイスにジャンプします

Web 開発では、特定のページへの移動など、いくつかの操作を実行するためにボタンを使用することがよくあります。 JavaScript では、イベント リスナーを追加してボタン クリック イベントを実装し、window.location.href を使用して新しいページに移動できます。

実装方法:

1. HTMLコード部分

まず、HTMLコードにボタン要素を追加し、取得しやすいようにIDを定義します。 JavaScriptで。たとえば、ボタンの ID に「myButton」という名前を付けます。

コードは次のとおりです:

<button id="myButton">点击跳转</button>

2. JavaScript コード部分

JavaScript コードでは、document.getElementById メソッドを使用してボタンを取得できます。要素。次に、クリック イベント リスナーをボタン要素に追加し、イベントの発生時にジャンプ コードを実行します。

コードは次のとおりです:

var myButton = document.getElementById("myButton");

myButton.addEventListener("click", function() {
  window.location.href = "https://www.example.com";
});

このコードでは、最初に document.getElementById メソッドを使用して、ID が「myButton」のボタン要素を取得し、それを「」という名前のファイルに保存します。 myButton」を変数に含めます。次に、addEventListener メソッドを使用して、ボタン要素にイベント リスナーを追加します。ボタンがクリックされると、コールバック関数が実行されます。このコールバック関数では、window.location.href を使用して、ブラウザーの現在のページから新しいページの URL に移動します。

3. 完全なコード

上記の 2 つのコード部分を結合すると、次のような完全な JavaScript コードが得られます:

<button id="myButton">点击跳转</button>

<script>
  var myButton = document.getElementById("myButton");

  myButton.addEventListener("click", function() {
    window.location.href = "https://www.example.com";
  });
</script>

このスクリプトはボタンになります。ボタンをクリックすると、ブラウザは https://www.example.com のページにジャンプします。

概要

JavaScript は、Web ページの対話性を実現するための重要なツールの 1 つです。 JavaScript を使用すると、ボタンによる新しいページへの移動など、さまざまな機能を実装できます。この記事では、JavaScript を使用してクリック イベント リスナーをボタンに追加し、イベントの発生時に新しいページに移動する方法を説明しました。この記事があなたのお役に立てば幸いです。

以上がJavaScript ボタンをクリックしてインターフェイスにジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。