HTML ボタンから JavaScript 関数を適切に呼び出すにはどうすればよいですか?

HTML ボタンを使用した JavaScript 関数の呼び出し

HTML ボタンを使用して、JavaScript 関数 CapacityChart() を呼び出そうとしています。しかし、関数は適切に実行されていません。

最初のアプローチでは、onclick イベント ハンドラーを定義します。 HTML 要素内で直接:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

ただし、HTML でのイベント ハンドラーの定義には制限があります。最近のブラウザでは、コードの編成とメンテナンスを改善するために JavaScript イベント リスナーの使用が好まれています。

JavaScript を使用すると、addEventListener() メソッドを使用してボタンの onclick イベントにイベント リスナーを割り当てることができます。

document.getElementById("buttonId").addEventListener("click", CapacityChart);

別のオプションは、匿名関数を onclick プロパティに直接アタッチすることです。

document.getElementById("buttonId").onclick = function() { CapacityChart(); };

CapacityChart() 関数はおそらく別の場所にあります。この問題に対処するには、次のコードを使用してみてください。

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

さらに、ブラウザ間の互換性を確保するには、コード内の document.all のインスタンスを document.getElementById に置き換えます。

以上がHTML ボタンから JavaScript 関数を適切に呼び出すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。