Simple show/hide script

[MaDmiX]

Hi All,

I am trying to get a simple show/hide script to work. It seems that my If statement is always returning false because my div "equipFields" is always hidden. Also, I added an alert to flag if it returns true and the alert is never popping up (even when the condition should be true).

I think it has something to do with the fact that I am using PHP to return data from a recordset (this is what fills the "cat" variable) but I don't know how else to code this. Any help is always appreciated. Thanks in advance.

Ken

          <script type="text/javascript">
          function hideshow(){
          var cat = document.getElementById('category');
          var eqFields = document.getElementById('equipFields');
            if (cat=="Equipment issue") {
            alert("it says equipment issue");
            eqFields.style.display="block";           
            }else{
            eqFields.style.display="none";
            }
          };
          window.onload = function() {
            hideshow();
          };
          </script>
            <h4><em>Details of your selected entry:</em></h4>
        <p>
          <label><em><strong>Airdate - </strong></em></label>
          <em><?php echo $row_rstOnAirActivity['Airdate']; ?><br/>
          </em>
        <p>
          <em>
          <label><strong>Event Category - </strong></label>
          <div id="category"><?php echo $row_rstOnAirActivity['DiscrepType']; ?></div><br/>
          </em>
        <p>
          <em>
          <label><strong>Detail - </strong></label>
          <?php echo $row_rstOnAirActivity['DiscrepDetail']; ?><br/>
          </em>
        <p>
          <div id="equipFields">
          <em>
          <label><strong>Equipment Location - </strong></label>
          <?php echo $row_rstOnAirActivity['EquipLoc']; ?><br/>
          </em>
         <p>
          <em>
          <label><strong>Equipment ID - </strong></label>
          <?php echo $row_rstOnAirActivity['EquipID']; ?></em></em><br/>
          </div>
        <p>

[mrhoo]

You are setting cat to refer to an element, not the text it contains.

[MaDmiX]

Originally Posted by mrhoo

You are setting cat to refer to an element, not the text it contains.

Thanks mrhoo,

I didn't realize that and this put me in the right direction. I tried:

var eqFields = document.getElementById('equipFields').value;

and

if (cat.value=="Equipment issue") {

but neither one would work. Forgive my lack of experience but what would be the correct way to set this variable

Kind regards,

Ken

[Philip M]

Your id's refer to a <div>, not a form field, so

var cat = document.getElementById('category').innerHTML;
var eqFields = document.getElementById('equipFields').innerHTML;

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[MaDmiX]

Originally Posted by Philip M

Your id's refer to a <div>, not a form field, so

var cat = document.getElementById('category').innerHTML;
var eqFields = document.getElementById('equipFields').innerHTML;

Hi Phillip M,

Thanks for your help. I made your suggested change but it still does not work. The alert is not being triggered and the div is always visible. Could it be that I am using a PHP echo to pull the value of cat? I will read up on innerHTML but in the meantime here is the code with your change. Is this what you intended:

          <script type="text/javascript">
          function hideshow(){
          var cat = document.getElementById('category').innerHTML;
          var eqFields = document.getElementById('equipFields').innerHTML;
            if (cat=="Equipment issue") {
            alert("it says equipment issue");
            eqFields.style.display="block";           
            }else{
            eqFields.style.display="none";
            }
          };
          window.onload = function() {
            hideshow();
          };
          </script>
            <h4><em>Details of your selected entry:</em></h4>
        <p>
          <label><em><strong>Airdate - </strong></em></label>
          <em><?php echo $row_rstOnAirActivity['Airdate']; ?><br/>
          </em>
        <p>
          <em>
          <label><strong>Event Category - </strong></label>
          <div id="category"><?php echo $row_rstOnAirActivity['DiscrepType']; ?></div><br/>
          </em>
        <p>
          <em>
          <label><strong>Detail - </strong></label>
          <?php echo $row_rstOnAirActivity['DiscrepDetail']; ?><br/>
          </em>
        <p>
          <div id="equipFields">
          <em>
          <label><strong>Equipment Location - </strong></label>
          <?php echo $row_rstOnAirActivity['EquipLoc']; ?><br/>
          </em>
         <p>
          <em>
          <label><strong>Equipment ID - </strong></label>
          <?php echo $row_rstOnAirActivity['EquipID']; ?></em></em><br/>
          </div>
        <p>

[MaDmiX]

Hi All,

I just wanted to post to say I got the script working. It was actually that, while the innerHTML propert was needed for the cat variable, it was not needed for the eqFields variable (since I was only hiding & showing this div, not pulling the value). Once I made this change, the script worked.

Thanks again, everyone for your help.

Ken