使用Javascript來顯示隱藏的CSS類 - 表單元素

我需要能夠顯示某些表單元素，具體取決於用戶選擇什麼。我試着用CSS類做這個，然後用JavaScript改變類來顯示正確的元素，但它似乎並沒有爲我工作。這裏是我遇到麻煩的部分代碼。使用Javascript來顯示隱藏的CSS類 - 表單元素

<html> 

    <head> 
<title>Outcome 3</title> 
<style> 
.hidden { 
    display: none; 
    } 

    .PixieLott { 
    display: none; 
    } 

</style> 

<script> 

document.getElementById('PixieLottVenueLondonLabel').style.display = "block"; 

</script> 

</head> 

<body> 

<!-- 

credit card number--> 


<!-- Form --> 


<form name="Tickets"> 
<label for="First Name" class="UserDetails">First Name-</label> 
<input type="text" name="firstName" iD="First Name" class="UserDetails"> 
<br> 
<label for="Last Name" class="UserDetails">Last Name-</label> 
<input type="text" name="lastName" iD="Last Name" class="UserDetails"> 
<br> 
<label for="Email" class="UserDetails">Email-</label> 
<input type="text" name="Email" iD="Email" class="UserDetails"> 
<br> 
<label for="Telephone" class="UserDetails">Telephone-</label> 
<input type="text" name="Telephone" iD="Telephone" class="UserDetails"> 
<br> 
<label for="Credit Card" class="UserDetails">Credit Card Number-</label> 
<input type="text" name="creditCard" iD="Credit Card" class="UserDetails"> 
<br> 

<label for="Artist" class="ArtistChoice">Please choose the artist</label> 
<select name="Artist" iD="Artist" class="ArtistChoice"> 
    <option>Pixie Lott</option> 
    <option>Rihanna</option> 
    <option>Foo Fighters</option> 
    <option>Pharrell Williams</option> 
    <option>Beyonce</option> 
</select> 
<br> 
<br> 

<!-- Venues --> 

<!-- Pixie Lott Venues--> 

<label id="PixieLottVenueLondonLabel" class="PixieLott"> London</label> 
<input type="radio" iD="PixieLottVenueLondon" name="Pixie Lott Venues" class="hidden" value="London" checked> 
<label for="PixieLottVenueManchester" class="hidden">Manchester</label> 
<input type="radio" iD="PixieLottVenueManchester" name="Pixie Lott Venues" class="hidden" value="Manchester"> 
<br> 

</form> 

</body> 
</html>

運行時出現錯誤遺漏的類型錯誤：無法從代碼的document.getElementById（「PixieLottVenueLondonLabel」）的行讀空的特性「風格」的style.display =「塊」;

來源

2015-06-07 Sendo

在''HTML實際加載之前，您正在運行您的JS（包括'getElementById'）。 – bardzusny

這個問題已被問幾十次，如果不是百次。請更難搜索。規範的答案是http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element。 –

同樣的問題，我可以輕鬆找到，但我找不到我的問題在其他地方的答案抱歉。謝謝 – Sendo

您的<script>塊在構建以下元素的DOM之前正在運行。將<script>塊移到HTML文件的底部，錯誤將被修復。

來源

2015-06-07 12:57:02 zlumer

謝謝，簡直不敢相信它那麼簡單。 – Sendo

使用Javascript來顯示隱藏的CSS類 - 表單元素

回答

相關問題