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

使用Javascript显示隐藏的CSS类-表单元素,javascript,html,css,Javascript,Html,Css,我需要能够根据用户选择的内容显示某些表单元素。我试着用CSS类来实现这一点,然后用JavaScript改变类来显示正确的元素,但它似乎对我不起作用。下面是我遇到麻烦的代码部分 <html> <head> <title>Outcome 3</title> <style> .hidden { display: none; } .PixieLott { display: none;

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

结果3
.隐藏{
显示:无;
}
皮克谢洛特先生{
显示:无;
}
document.getElementById('PixieLottVenueLondonLabel').style.display=“block”;
名字-

姓-
电子邮件-
电话-
信用卡号码-
请选择艺术家 皮克茜·洛特 蕾哈娜 喷火战机 法雷尔·威廉姆斯 碧昂丝

伦敦 曼彻斯特

运行时,我收到错误Uncaught TypeError:无法从代码文档行读取null的属性'style'

您的
块在构建以下元素的DOM之前运行。将
块移动到HTML文件的底部,错误将被修复。

HTML实际加载之前,您正在运行JS(包括
getElementById
)。这个问题已经被问了几十次,甚至几百次。请加大搜索力度。典型的答案是。同样的问题我可以很容易地找到,但我在别处找不到我问题的答案。对不起。谢谢谢谢,真不敢相信这么简单。