2012-07-12 99 views
0

我有一個奇怪的問題。 我有按鈕,「NextButton」,我想先隱藏,但然後當一個複選框被點擊時,它應該出現。 下面的代碼不起作用,它不會給出任何錯誤。我已經測試了IE9和Firefox 13 我搜索其他的問題,但找不到,我有問題...html可見性風格不起作用

<html> 
<head> 
<script language="javascript"> 
     function enableNext() { 
      alert("clicked"); 

      var s1 = document.getElementsByName("NextButton"); 
      s1.style.visibility = "visible"; 
     } 
    </script> 
</head> 

<body> 
<input type="submit" name="NextButton" value="Next" style="visibility:hidden;"/> 
<input type="checkbox" onClick="enableNext()" /> 
</body> 

</html> 
+0

你確定它不會給任何錯誤? – BoltClock 2012-07-12 07:04:58

+0

謝謝大家。 – user156144 2012-07-12 07:18:20

回答

3

在代碼中返回一個數組,並將樣式應用於數組。將其更改爲下面的代碼。

function enableNext() { 
      alert("clicked"); 

      var s1 = document.getElementsByName("NextButton")[0];//Get the first and only button in your case 
      s1.style.visibility = "visible"; 
     } 
1

document.getElementsByName返回匹配元素的數組,你必須循環在其上並更改數組中單個項目的樣式。您可以使用jQuery輕鬆地處理它$("[name='NextButton']").css("visibility", "visible")或者如果您想使用css display屬性,您可以使用$("[name='NextButton']").show().hide()。另外,如果你不想使用jQuery,你可以使用一個id,而不是使用getElementsByName使用getElementById,它會返回你需要的單個元素。

0

我想你應該嘗試使用CSS而不是JavaScript。

嘗試使用

document.getElementsByName("NextButton")[0]; 
1

你應該使用HTML元素id然後document.getElementById()。這將提供完全匹配的元素。

<script language="javascript"> 
     function enableNext() { 
      alert("clicked"); 

      var s1 = document.getElementById("NextButton"); 
      s1.style.visibility = "visible"; 
     } 
</script> 

<input type="submit" id="NextButton" name="NextButton" value="Next" style="visibility:hidden;"/>

+0

嘗試過,但沒有奏效。無論如何,謝謝 – user156144 2012-07-12 07:18:01

+0

@ user156144:你是否添加了'id'按鈕? – 2012-07-12 07:27:45