使用 HTML 按鈕調用 JavaScript function

Question

我正在嘗試使用 HTML 按鈕來調用 JavaScript function。

這是代碼：

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

它似乎無法正常工作。 有一個更好的方法嗎？

這里是鏈接： http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html點擊左下角的容量標簽。 如果值未更改，該按鈕應生成警報，如果您輸入值，則應生成圖表。

Answer 1

有幾種方法可以使用 HTML\/DOM 處理事件。 沒有真正的正確或錯誤的方式，但不同的方式在不同的情況下有用。

1：在 HTML 中有定義：

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

Answer 2

我會說以不顯眼的方式添加javascript會更好......

如果使用 jQuery，您可以執行以下操作：

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

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

Answer 3

您的 HTML 和您從按鈕調用函數的方式看起來是正確的。

問題似乎出在CapacityCount<\/code>函數中。 我在 Firefox 3.5 上的控制台中收到此錯誤：bendelcorp.js 第 759 行的“document.all is undefined”。

編輯：

看起來document.all<\/code>是一個僅限 IE 的東西，並且是一種訪問 DOM 的非標准方式。 如果您使用document.getElementById()<\/code> ，它應該可以工作。 示例： document.getElementById("RUnits").value<\/code>而不是document.all.Capacity.RUnits.value<\/code>

Answer 4

這看起來是正確的。 我猜您使用不同的名稱或在按鈕不可見的上下文中定義了您的函數。 請添加一些代碼

"

Answer 5

請注意，當您調用函數時，分號 ( ;<\/strong> ) 不應該出現在按鈕中。

所以它應該看起來像這樣： onclick="CapacityChart()"<\/code>

那么這一切都應該工作:)

Answer 6

您遇到的一個主要問題是您無緣無故地使用瀏覽器嗅探：

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 的任何瀏覽器上運行，所以你可能應該堅持下去......除了它不會工作（或不能保證）工作）因為您沒有在input元素上指定name屬性，所以它們不會作為命名元素添加到表單的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;
}

有助於。

Answer 7

您的代碼在此行失敗：

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

我嘗試用螢火蟲踩它，但它在那里失敗了。 這應該可以幫助您找出問題所在。

你有 jquery 引用。 您不妨在所有這些功能中使用它。 它會顯着清理你的代碼。

Answer 8

我有一個智能功能回調按鈕代碼：

<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>

Answer 9

簡單的答案：

   onclick="functionName(ID.value);

其中 ID 是輸入字段的 ID。

Answer 10

愚蠢的方式：

onclick="javascript:CapacityChart();"

您應該閱讀有關離散 javascript 的信息，並使用框架綁定方法將回調綁定到 dom 事件。