CODEWITHSUNDEEP
javascriptcssgoogle-chrome
Jim Sherry
Jim Sherry

Reputation: 1

javascript table cell display works in IE and Firefox but not in Chrome and Safari

I'm a beginner in javascript. I have a form with a table cell that asks the user to choose one of three options: Live Audition, Mailed DVD or Internet Performance. Depending upon which they choose, they should get a corresponding table cell which allows them to choose an audition location, gives them the DVD address, or provides a text input field for their Internet URL. My code works in Firefox and IE, but not in Chrome and Safari.

Here's the form code:

<tr>
<td class="form">Audition Type*<br /><select class="input" name="AuditionType">
<option value="">Select One</option>
<option onclick="makeLive()" value="Live">Live Audition</option>
<option onclick="makeMail()" value="Mail">Mailed DVD</option>
<option onclick="makeURL()" value="Internet">Internet Performance</option>
</select>
</td>

<td class="form" id="live" colspan="2" style="display:block, border:hidden" >Audition Location*<br /><select class="input" name="AuditionLocation">
<option value="">Select One</option>
<option value="Princeton">Princeton</option>
<option value="East Hanover">East Hanover</option>
</select>
</td>

<td  class="form" id="url" colspan="2" style="display:none" >Internet Performance   URL*<br />
<em>e.g. http://www.youtube.com/your_video</em><br /><input type="text" class="input"  name="AuditionURL"
maxlength="75" size="50" value="" /></td>

<td class="form" id="mail" colspan="2" style="display:none" >Mail DVD to: Golden Key    Festival<br />
 81 Five Points Road<br />
 Colts Neck, NJ 07722</td>
 </tr>

Here's the Javascript:

<script type="text/javascript">
function makeLive() {
document.getElementById('live').style.display="table-cell";
document.getElementById("mail").style.display="none";
document.getElementById("url").style.display="none";
}
</script>

<script type="text/javascript">
function makeMail() {
document.getElementById("mail").style.display="table-cell";
document.getElementById("live").style.display="none";
document.getElementById("url").style.display="none";
}
</script>

<script type="text/javascript">
function makeURL() {
document.getElementById("url").style.display="table-cell";
document.getElementById("live").style.display="none";
document.getElementById("mail").style.display="none";
}
</script>

What am I doing wrong??

Upvotes: 0

Views: 230

Answers (1)

BryceHayden
BryceHayden

Reputation: 596

OK so because my stupid reputation isn't high enough, I'm not able to add a comment to your original question. Therefore, I can't simply ask you to paste more of the original code. Hopefully you've already discovered the answer to your question though as it was posted some time ago.

As a aside note, the way you have your Javascript has some redundancies. First off if you want to include your javascript on the html page then you only need to use one script tag like so: 

<script type="text/javascript">
   function myFirstFunction (){
     ....
   }

   function mySecondFunction (){
     ....
   }
</script>

You don't need to repeat the tags individually for each function. Remember to use the DRY method and try not to repeat yourself. Also most developers like to place javascript into its own file and then simply import the file using script tags.

Now the main thing that I currently see, and I only took a quick look since I'm busy at work is that the display: none, border: hidden is your issue. The browser is not sure how to handle this since you use a comma instead of a semi-colon. so change that to display: none; border: hidden; Check out the jsfiddle

Upvotes: 1

Related Questions