☰

HTML ボタンを使用して JavaScript 関数を呼び出す 質問する

tag-icon • tag-icon javascript html
HTML ボタンを使用して JavaScript 関数を呼び出す 質問する

HTML ボタンを使用して JavaScript 関数を呼び出そうとしています。

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

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

ただし、正しく動作していないようです。もっと良い方法はありますか?

リンクはこちらです:http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html左下のセクションにある容量タブをクリックします。値が変更されていない場合はボタンによってアラートが生成され、値を入力するとグラフが生成されます。

ベストアンサー1

HTML/DOM でイベントを処理する方法はいくつかあります。正しい方法や間違った方法というものはありませんが、状況によって役立つ方法は異なります。

1: HTML で定義されています:

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: Javascript でイベントの DOM プロパティに追加します。

//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;

//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };

3: そして、Javascript を使用してイベント ハンドラーに関数をアタッチします。

var el = document.getElementById("clickMe");
if (el.addEventListener)
    el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
    el.attachEvent('onclick', doFunction);

2 番目と 3 番目の方法はどちらもインライン/匿名関数を許可しており、どちらも要素がドキュメントから解析された後に宣言する必要があります。最初の方法は、onclick 属性が XHTML 仕様にないため、有効な XHTML ではありません。

1 番目と 2 番目の方法は相互に排他的であり、一方 (2 番目) を使用すると、他方 (1 番目) が上書きされます。3 番目の方法を使用すると、1 番目または 2 番目の方法が使用されている場合でも、同じイベント ハンドラーに任意の数の関数をアタッチできます。

おそらく、問題はCapacityChart()関数のどこかにあります。リンクにアクセスしてスクリプトを実行すると、CapacityChart() 関数が実行され、2 つのポップアップが開きます (1 つはスクリプトに従って閉じられます)。次の行があります。

CapacityWindow.document.write(s);

代わりに次のことを試してください。

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

編集:
あなたのコードを見たとき、IE 専用に書いているのかと思いました。他の人が言っているように、 への参照を に置き換える必要がありますdocument.all。document.getElementByIdただし、この後もスクリプトを修正する作業が残っているので、まずは少なくとも IE で動作するようにすることをお勧めします。コードを複数のブラウザーで動作するように変更する際にミスをすると、さらに混乱が生じる可能性があります。IE で動作するようになれば、コードを更新しているときに他のブラウザーで動作するかどうかが簡単にわかります。

おすすめ記事