admin管理员组文章数量:1391960
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):
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>3 Answers
Reset to default 7e.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>本文标签： javascriptFunction that tests if DIV is showing only works the second timeStack Overflow
版权声明：本文标题：javascript - Function that tests if DIV is showing only works the second time - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744686072a2619707.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论