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

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>

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):

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>

Share Improve this question edited Sep 14, 2015 at 0:58 Barmar 784k57 gold badges548 silver badges659 bronze badges asked Sep 14, 2015 at 0:21 WayneCa 1618 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 7

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>

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;
   }

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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744686073a4587924.html

javascript - Function that tests if DIV is showing only works the second time - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Function that tests if DIV is showing only works the second time - Stack Overflow

3 Answers 3

相关推荐