[解決済み】HTMLボタンでJavaScriptの関数を呼び出す方法

質問

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

以下はそのコードです。

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

しかし、正しく動作していないようです。何か良い方法はないでしょうか？

以下はそのリンクです。 http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html 左下のセクションにある容量タブをクリックします。ボタンは、値が変更されていない場合はアラートを生成し、値を入力した場合はチャートを生成する必要があります。

解決するには？

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();

EDIT

あなたのコードを見たとき、私はあなたがIE専用に書いているのだと思いました。 他の方がおっしゃっているように、以下の参照を置き換える必要があります。 document.all で document.getElementById . しかし、この後もスクリプトを修正する作業は続くので、クロスブラウザで動作するようにコードを変更する際にミスがあると、さらに混乱する可能性があるので、少なくともIEで最初に動作させることをお勧めします。 IEで動作するようになれば、他のブラウザで動作しているかどうかを、コードを更新しながら簡単に判断できるようになります。