Question

我需要能够根据用户选择的内容显示某些表单元素。我尝试使用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>

运行时我收到错误Uncaught TypeError：无法读取属性＆＃39; style＆＃39;来自代码行document.getElementById（＆＃39; PixieLottVenueLondonLabel＆＃39;）。style.display =＆＃34; block＆＃34 ;;

Answer 1

在构造以下元素的DOM之前，正在运行您的<script>块。将<script>块移动到HTML文件的底部，错误将被修复。

使用Javascript显示隐藏的CSS类 - 表单元素

1 个答案: