Css format not recognized after running javascript function

Question

`Guys thank you in advance, this is my issue:

I'm building a survey that ask the user one question and 5 answers and depending on the answer it displays another question. All this questions are contained in a table that shows the format based in a css file. The optional questions are hidden by default using style="display:none" and I have a java script function that shows this hidden question when one of the options is selected. This hidden question has the same class than the others "css", but for some reason when this optional question is displayed the format is not the same than the others, it's seems to me that the css is not been recognized.

JavaScript Function:

<script>
function showTag(X_Value)
{
    document.getElementById(X_Value).style.display = "block"; 
}

function hideTag()
{
    document.getElementById("Hide-Show").style.display = "none";  
}
</script>

This image shows how looks the optional question, as you can see is not formated as the others

enter image description here

html code regarding the first and the optional question:

HTML Code

    <form method="post" action="<?php $_PHP_SELF ?>">

    <table  id="customerquestions" cellspacing="20" cellpadding="0"  width="100"  >
    <tbody >



    <tr class="rowa">
    <td class="col1 cell" style="text-align: left;"> <input TYPE="radio" Name="Q1"    Value="1"checked="" >How would you rate the company in motivating you? </td>
    <td class="col2 cell"><input TYPE="radio" Name="A1" Value="Excellent"onclick="hideTag('Hide-Show')"> </td>
    <td class="col3 cell"><input TYPE="radio" Name="A1" Value="Good" onclick="hideTag('Hide-Show')"> </td>
    <td class="col4 cell"><input TYPE="radio" Name="A1" Value="Acceptable"onclick="hideTag('Hide-Show')"> </td>  
    <td class="col5 cell"><input TYPE="radio" Name="A1" Value="Poor"onclick="hideTag('Hide-Show')"> </td> 
    <td class="col6 cell"><input TYPE="radio" Name="A1"  Value="Very poor"onclick="showTag('Hide-Show')"> </td>  
</tr>


<tr class="rowa" id="Hide-Show" style="display:none" >
    <td class="col1 cell" style="text-align: left;"> <input TYPE="radio" Name="Q2" Value="2"checked="" >What is affecting your motivation </td> 
    <td class="col2 cell"><input TYPE="radio" Name="A1" Value="Option 1">Option 1</td>
    <td class="col3 cell"><input TYPE="radio" Name="A1" Value="Option 2"> Option 1</td>
    <td class="col4 cell"><input TYPE="radio" Name="A1" Value="Option 3">Option 1 </td>  
    <td class="col4 cell"><input TYPE="radio" Name="A1" Value="Option 4">Option 1 </td>  
    <td class="col5 cell"><input TYPE="radio" Name="A1" Value="Option 5"> Option 1 </td> 
</tr>

Can you post the HTML code? Perhaps the option group is nested inside of the left div. — user571545
– user571545, Commented Apr 26, 2014 at 21:56
Please don't be lazy and post an impossible-to-read screenshot of your code. Copy-and-paste it into the question, and ensure it is formatted properly. — Jonathon Reinhart
– Jonathon Reinhart, Commented Apr 26, 2014 at 21:56
Sorry ! i thought the picture was the best option i didn't realize the code looks good until now that i posted. — Cessna
– Cessna, Commented Apr 26, 2014 at 22:11
I think you meant action="<?= $_SERVER['PHP_SELF'] ?>" in your form tag. Regardless of what variable you want to output, right now you are not echoing anything in the action value, use either <?php echo or <?=, the short-hand for echoing. — faintsignal
– faintsignal, Commented Apr 26, 2014 at 22:18

faintsignal · Accepted Answer · 2014-04-27 00:24:48Z

1

A table row is different type of element than a block element (such as a div). Change

document.getElementById(X_Value).style.display = "block";

to

document.getElementById(X_Value).style.display = "table-row";

Generally speaking, when you are unhiding an element, you want to return its display value to its natural state. For example, for <p> and <div>, the natural value of display is block; for <span> it is inline; for <tr> elements it is the more specific value table-row.

When you want to set an elements display value to its default, you can do this without knowing the default value by setting the value to an empty string. E.g.

document.getElementById(X_Value).style.display = ''; // set display to default

edited Apr 27, 2014 at 0:24

answered Apr 26, 2014 at 22:27

faintsignal

1,8363 gold badges22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cessna Over a year ago

You are the man !! thank you it works perfect. Can you please explain in more detail why wasn't working?

faintsignal Over a year ago

I tripped up on the same thing a long time ago, and from what I can tell some elements are simply unable to behave like block-style elements. In the case of elements that are sub-elements of a table, they must adhere to the confines of that context.

Collectives™ on Stack Overflow

Css format not recognized after running javascript function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related