如何計算HTML頁面的按鈕數量？

我有一個HTML頁面的源代碼如下 -如何計算HTML頁面的按鈕數量？

<html> 
<script type="text/javascript"> 
function jsMeth() { 
     alert('Count of buttons : '+document.getElementsByTagName('button').length); 
} 
</script> 
<input type="button" value="button 1" id="btn1" name="btn1" /><br> 
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br> 
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/> 
</html>

我的基本目的是，當我點擊有鍵ID「btn3」，它應該顯示在我的HTML頁面的按鈕數量（本情況3）。但不知何故，它總是顯示爲0。

感謝您的快速回復。由於所有的你的建議，我已經修改我的代碼如下 -

<html> 
<script type="text/javascript"> 
function jsMeth() { 
     alert('Count of buttons : '+document.querySelectorAll('[type=button]').length); 
} 
</script> 
<input type="button" value="button 1" id="btn1" name="btn1" /><br> 
<input type="button" value="butto 2" id="btn2" name="btn2" /><br><br> 
<input type="button" value="Calculate button count" id="btn3" name="btn3" onclick="jsMeth();"/> 
</html>

但現在我得到下面的錯誤 -

Message: Object doesn't support this property or method 
Line: 4 
Char: 9 
Code: 0 
URI: file:///C:/Documents%20and%20Settings/556996/Desktop/demohtml.html

我在IE8測試。請幫忙！

感謝， Kartic

來源

2013-05-08 tik

所有這些元素的標籤名稱是'input'。 – 2013-05-08 19:36:32

是的布賴恩，我可以使用document.getElementByTagName（「輸入」），然後檢查類型按鈕，但我想知道如果我可以不做所有這些東西的所有按鈕元素。現在我懷疑這是沒有選擇的。是嗎？ – tik 2013-05-09 19:27:11

使用這個.. 。

function jsMeth() { 
     alert('Count of buttons : '+document.querySelectorAll('[type=button]').length); 
}

或者對於舊瀏覽器

function jsMeth() { 
    var elem = document.getElementsByTagName('input'); 
    var numBts = 0; 
    for(i = 0; i < elem.length; i++){ 
     if(elem[i].getAttribute('type') === 'button'){ 
      numBts+=1; 
     } 
    } 
    alert(numBts); 
}

DEMO

來源

2013-05-08 19:41:30

嗨MG_Bautista，感謝您的回覆。正如我已經發布，使用document.querySelectorAll（'[type = button]'）。長度我越來越javascript錯誤。此外，它不適用於較舊版本的IE（IE7及更早版本）。你可以請任何其他解決方案。 – tik 2013-05-09 11:12:22

@Kartic我的朋友，再次看到aswer ...演示更新 – 2013-05-09 13:35:36

這很酷。我已經試過了。但我必須說，就我所嘗試的情況而言，這是最好的解決方案。謝謝++你 – tik 2013-05-09 19:34:31

嘗試使用任一

document.getElementsByTagName('input')

或更具體的

document.querySelectorAll('[type=button'])

來源

2013-05-08 19:38:03

你面臨的問題是，你不必與任何元素標籤名稱button。所有按鈕的標籤名稱爲input。

如果你不支持IE7，你可以使用querySelectorAll獲得這些元素：

document.querySelectorAll('input[type=button]')

或者你可以改變你的HTML使用<button>元素：

<button type="button" value="button 1" id="btn1" name="btn1">button 1</button>

來源

2013-05-08 19:39:59

如何計算HTML頁面的按鈕數量？

回答

相關問題