CODEWITHSUNDEEP
javascripthtmlcss
Cessna
Cessna

Reputation: 309

Css format not recognized after running javascript function

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

Upvotes: 0

Views: 125

Answers (1)

faintsignal
faintsignal

Reputation: 1836

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

Upvotes: 1

Related Questions