Function that tests if DIV is showing only works the second time

Question

This problem is so specific I am not sure any search would find a similar answer, so I am asking as though it is a new problem.

The expected behavior:

Click button 'mySol' makes div My solution visible
Click button 'YASS' makes div My solution hidden and div YASS solution visible
Click button 'Tak' makes div YASS solution hidden and div Takaken solution visible

This works as expected, only after the first time you click all three buttons. The first time through does the following (and is repeatable by refreshing the page):

Click button 'mySol' makes div My solution visible Click button 'YASS' leaves div My solution visible and makes div YASS solution visible Click button 'Tak' leaves divs My solution and YASS solution visible and makes div Takaken solution visible Click button 'mySol' leaves divs YASS solution and Takaken solution visible and makes div My solution hidden Click button 'YASS' leaves div Takaken solution visible and makes div YASS solution hidden Click button 'Tak' makes div Takaken solution hidden

These can be done in any order with the same result. After the last div is hidden again the function works properly and one div is visible at a time. I do not understand what is causing this problem, and need some help correcting it.

Any help is appreciated.

Here is the code:

      function visInvis(id) {
        var a = document.getElementById('mySol');
        var b = document.getElementById('YASS');
        var c = document.getElementById('Tak');
        var e = document.getElementById(id);
        if(e == a && e.style.display == 'none') {
          b.style.display = 'none';
          c.style.display = 'none';
        }
        if(e == b && e.style.display == 'none') {
          a.style.display = 'none';
          c.style.display = 'none';
        }
        if(e == c && e.style.display == 'none') {
          a.style.display = 'none';
          b.style.display = 'none';
        }
        if(e.style.display == 'block')
          e.style.display = 'none';
        else
          e.style.display = 'block';
      }

      #mySol { display: none; }
      #YASS { display: none; }
      #Tak { display: none; }

<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Sample Solution Page</TITLE>
  </HEAD>
  <BODY>
    <TABLE align="left" valign="top" width="16%">
      <TR><TH align="left" colspan="2">Puzzle Name</TH></TR>
      <TR><TD>Width:</TD><TH width="50%">0</TH></TR>
      <TR><TD>Height:</TD><TH width="50%">0</TH></TR>
      <TR><TD>Boxes/Goals:</TD><TH width="50%">0</TH></TR>
      <TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution"></TD></TR>
      <TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
      <TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution"></TD></TR>
      <TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
      <TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution"></TD></TR>
      <TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
    </TABLE>
    <TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
      <CAPTION align="top"><B>Solution</B></CAPTION>
      <TR><TD valign="top">
        <DIV id=mySol>My Solution</DIV>
        <DIV id=YASS>YASS Solution</DIV>
        <DIV id=Tak>Takaken Solution</DIV>
      </TD></TR>
    </TABLE>
  </BODY>
</HTML>

Barmar · Accepted Answer

e.style.display only contains styles that are set with inline style="display: xxx" attributes, not styles that are inherited from CSS rules. That's why your code doesn't work the first time.

Use getComputedStyle(e).getPropertyValue('display').

function visInvis(id) {
  var a = document.getElementById('mySol');
  var b = document.getElementById('YASS');
  var c = document.getElementById('Tak');
  var e = document.getElementById(id);
  var eStyle = getComputedStyle(e).getPropertyValue('display');
  if (eStyle == 'none') {
    if (e == a) {
      b.style.display = 'none';
      c.style.display = 'none';
    } else if (e == b) {
      a.style.display = 'none';
      c.style.display = 'none';
    } else if (e == c) {
      a.style.display = 'none';
      b.style.display = 'none';
    }
    e.style.display = 'block';
  } else {
    e.style.display = 'none';
  }
}

#mySol {
  display: none;
}
#YASS {
  display: none;
}
#Tak {
  display: none;
}

<!DOCTYPE HTML>
<HTML>

<HEAD>
  <TITLE>Sample Solution Page</TITLE>
</HEAD>

<BODY>
  <TABLE align="left" valign="top" width="16%">
    <TR>
      <TH align="left" colspan="2">Puzzle Name</TH>
    </TR>
    <TR>
      <TD>Width:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Height:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Boxes/Goals:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
  </TABLE>
  <TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
    <CAPTION align="top">
      <B>Solution</B>
    </CAPTION>
    <TR>
      <TD valign="top">
        <DIV id=mySol>My Solution</DIV>
        <DIV id=YASS>YASS Solution</DIV>
        <DIV id=Tak>Takaken Solution</DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

Shakti · Answer

The following code may be help you.

   function visInvis(id) {
       var a = document.getElementById('mySol');
       var b = document.getElementById('YASS');
       var c = document.getElementById('Tak');
       var e = document.getElementById(id);

       var eStyle = getComputedStyle(e).getPropertyValue('display');        

       var display = eStyle == 'none' ? 'block' : 'none';       
       a.style.display = b.style.display = c.style.display = 'none'
       e.style.display = display;
   }

MaxZoom · Answer

It seems that the browser does not set the display to none but to empty string ''. Thus the function could be fixed as below:

function visInvis(id) {
  var e = document.getElementById(id);
  var eStyle = e.style.display;
  // all off
  document.getElementById('mySol').style.display = '';
  document.getElementById('YASS').style.display = '';
  document.getElementById('Tak').style.display = '';
  // set style to oposite of the original value
  e.style.display = (eStyle == 'block') ? '' : 'block';
}

#mySol {
  display: none;
}
#YASS {
  display: none;
}
#Tak {
  display: none;
}

<!DOCTYPE HTML>
<HTML>

<HEAD>
  <TITLE>Sample Solution Page</TITLE>
</HEAD>

<BODY>
  <TABLE align="left" valign="top" width="16%">
    <TR>
      <TH align="left" colspan="2">Puzzle Name</TH>
    </TR>
    <TR>
      <TD>Width:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Height:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD>Boxes/Goals:</TD>
      <TH width="50%">0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
    <TR>
      <TD colspan="2">
        <INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution">
      </TD>
    </TR>
    <TR>
      <TD>Moves/Pushes:</TD>
      <TH width="50%">0/0</TH>
    </TR>
  </TABLE>
  <TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
    <CAPTION align="top">
      <B>Solution</B>
    </CAPTION>
    <TR>
      <TD valign="top">
        <DIV id=mySol>My Solution</DIV>
        <DIV id=YASS>YASS Solution</DIV>
        <DIV id=Tak>Takaken Solution</DIV>
      </TD>
    </TR>
  </TABLE>
</BODY>

</HTML>

Function that tests if DIV is showing only works the second time

Tags:

javascript

html

css

WayneCa

3 Answers

Barmar

Shakti

MaxZoom

Recent Activity

Donate For Us

Function that tests if DIV is showing only works the second time

Tags:

javascript

html

css

WayneCa

3 Answers

Barmar

Shakti

MaxZoom

Related questions

Recent Activity

Donate For Us