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

編集
あなたのコードを見たとき、私はあなたがIEのためにそれを特別に書いていると思った。他の人が述べたように、あなたはへの参照を交換する必要がありますdocument.allとdocument.getElementById。ただし、この後もスクリプトを修正する必要があるので、ブラウザーを越えて機能するようにコードを変更するミスをするとさらに混乱を招く可能性があるため、少なくともIEで最初にスクリプトを機能させることをお勧めします。IEで動作するようになると、コードを更新している間、他のブラウザで動作しているかどうかが簡単にわかります。

私は控えめな方法でJavaScriptを追加する方が良いと思います...

jQueryを使用している場合、次のようなことができます。

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

HTMLとボタンから関数を呼び出す方法は正しく見えます。

CapacityCount関数に問題があるようです。Firefox 3.5のコンソールで次のエラーが発生します：bendelcorp.jsの759行目で「document.all is undefined」。

編集：

のように見えdocument.allますIEのみのものであり、DOMにアクセスする非標準的な方法です。を使用する場合document.getElementById()、おそらく動作するはずです。例：document.getElementById("RUnits").value代わりにdocument.all.Capacity.RUnits.value

これは正しいようです。関数を別の名前で定義したか、ボタンに表示されないコンテキストで定義したと思います。コードを追加してください

ご存知のように、関数を呼び出すときにセミコロン（;）がボタンにあるとは限りません。

したがって、次のようになります。 onclick="CapacityChart()"

その後、それはすべてうまくいくはずです:)

あなたが抱えている大きな問題の1つは、正当な理由もなくブラウザのスニッフィングを使用していることです。

if(navigator.appName == 'Netscape')
    {
      vesdiameter  = document.forms['Volume'].elements['VesDiameter'].value;
      // more stuff snipped
    }
    else
    {
      vesdiameter  = eval(document.all.Volume.VesDiameter.value);
      // more stuff snipped
    }

私はChromeを使っているので、そうnavigator.appNameなりませんNetscape。Chromeはサポートしdocument.allますか？たぶん、それでも多分そうではないかもしれません。そして、他のブラウザはどうですか？

Netscapeブランチのコードのバージョンは、1996年からNetscape Navigator 2に戻るまでのすべてのブラウザーで動作するはずです。そのため、おそらくそれをそのまま使用する必要があります...動作しない（または動作が保証されていない）場合を除きます。 ）要素にname属性を指定していないため、名前付き要素としてinputフォームのelements配列に追加されません。

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

それらに名前を付けてelements配列を使用するか、（より良い）使用します

var vesdiameter = document.getElementById("VesDiameter").value;

すべての最新のブラウザで動作します-分岐は必要ありません。安全のために、4以上のブラウザーバージョンのスニッフィングをgetElementByIdサポートのチェックに置き換えます。

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
    // do stuff...
}

入力も検証したいでしょう。何かのようなもの

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
    alert("Diameter should be numeric");
    return;
}

役立つだろう。

あなたのコードはこの行で失敗しています：

var RUnits = Math.abs(document.all.Capacity.RUnits.value);

私はそれをファイアバグで踏んでみましたが、そこで失敗しました。それはあなたが問題を理解するのに役立つはずです。

あなたはjqueryを参照しています。これらすべての関数で使用することもできます。コードを大幅にクリーンアップします。

インテリジェントな関数呼び出しのボタンコードがあります。

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

簡単な答え：

   onclick="functionName(ID.value);

ここで、IDは入力フィールドのIDです。

ばかげた方法：

onclick="javascript:CapacityChart();"

個別のJavaScriptについて読み、フレームワークのbindメソッドを使用してコールバックをdomイベントにバインドする必要があります。