0

I need to be able to show certain form elements depending on what the user picks. I tried doing this with CSS classes and then changing the classes with JavaScript to show the correct element but it doesn't seem to be working for me. here is the portion of the code I am haveing trouble with.

    <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>

When run I get the error Uncaught TypeError: Cannot read property 'style' of null from the line of code document.getElementById('PixieLottVenueLondonLabel').style.display = "block";

Sendo
  • 25
  • 3
  • You're running your JS (including `getElementById`) before `` HTML is actually loaded. – bardzusny Jun 07 '15 at 12:57
  • This question has been asked dozens if not hundred of times. Please search harder. The canonical answer is http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element. –  Jun 07 '15 at 12:57
  • The same question I could find easily, but I couldn't find an answer to my problem elsewhere sorry. thanks though – Sendo Jun 07 '15 at 14:24

1 Answers1

0

Your <script> block is being run before the DOM for the following elements is constructed. Move <script> block to the bottom of the HTML file and the error will be fixed.

zlumer
  • 6,844
  • 1
  • 25
  • 25