使用Javascript显示隐藏的CSS类- Form元素
使用Javascript显示隐藏的CSS类- Form元素
提问于 2015-06-07 12:54:20
我需要能够显示特定的表单元素，这取决于用户选择的内容。我试着用CSS类做这件事，然后用JavaScript更改类以显示正确的元素，但它似乎不适合我。下面是我遇到麻烦的部分代码。
<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 =“TypeError”行中得到错误Uncaught :无法读取属性'style‘of null；
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-07 12:57:02
在构造以下元素的DOM之前，您的<script>块正在运行。将<script>块移动到HTML的底部，错误将被修复。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30693767
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号