Funktion, die testet, wenn DIV zeigt nur funktioniert das zweite Mal

Dieses Problem ist so spezifisch, ich bin mir nicht sicher, dass jede Suche eine ähnliche Antwort finden würde, also frage ich, als ob es ein neues Problem ist.Funktion, die testet, wenn DIV zeigt nur funktioniert das zweite Mal

Das erwartete Verhalten:

Klicken Sie die Taste 'Misole' macht div Meine Lösung sichtbar
Klicken Sie die Taste 'YASS' div Meine Lösung versteckt und div YASS Lösung sichtbar
Klicken Sie die Taste 'Tak' macht macht div YASS Lösung versteckt und div Takaken Lösung sichtbar

Dies funktioniert wie erwartet, erst nach dem ersten Mal klicken Sie auf alle drei Schaltflächen. Das erste Mal durch führt die folgenden (und wiederholbar durch die Seite zu aktualisieren):

Klicken Sie die Taste ‚Misole‘ div Meine Lösung sichtbar Click-Taste Blätter div sichtbar Meine Lösung ‚YASS‘ macht und div YASS Lösung sichtbar Click Button 'Tak' Blätter Divs Meine Lösung und YASS Lösung sichtbar und macht div Takaken Lösung sichtbar Klicken Sie auf 'MySol' verlässt divs YASS Lösung und Takaken Lösung sichtbar und macht div Meine Lösung versteckt Klicken Sie auf 'YASS' verlässt div Takaken Lösung sichtbar und macht div YASS Lösung versteckt Klicken Sie auf "Tak" macht div Takaken Lösung versteckt

Diese können b Das geschieht in beliebiger Reihenfolge mit dem gleichen Ergebnis. Nachdem das letzte div wieder ausgeblendet wurde, funktioniert die Funktion ordnungsgemäß und ein div ist gleichzeitig sichtbar. Ich verstehe nicht, was dieses Problem verursacht, und brauche Hilfe, um es zu korrigieren.

Jede Hilfe wird geschätzt. Hier

ist der 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>

Quelle

2015-09-14 WayneCa

e.style.display nur Arten enthält, die style="display: xxx" Attribute mit Inline festgelegt sind, nicht Stile, die von CSS-Regeln vererbt werden. Deshalb funktioniert dein Code beim ersten Mal nicht.

Verwenden Sie 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>

Quelle

2015-09-14 00:36:27 Barmar

Muss ich alle Instanzen von a/b/c/e.style.display mit dieser Funktion ersetzen? – WayneCa

und in den if-Bedingungen sowie die Zuordnung Anweisungen? – WayneCa

Sie müssen es nur tun, wenn Sie den Stil lesen, nicht einstellen - es macht keinen Sinn, einen berechneten Stil zu definieren, er wird berechnet, indem alle CSS mit dem Inline-Stil verschmolzen werden. – Barmar

Es scheint, dass der Browser so einstellen, nicht die Anzeige auf none aber zu leeren String ''. So könnte die Funktion, wie unten festgelegt werden:

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>

Quelle

2015-09-14 00:27:33 MaxZoom

'e' enthält das Ergebnis des Aufrufs' document.getElementById (id) ', so dass er eines der Elemente wird in' a', 'b', 'c' oder. – Barmar

Ihre Antwort leidet immer noch an ihrem ursprünglichen Problem: Sie können '.style' nicht verwenden, um den Stil von CSS geerbt zu bekommen. – Barmar

Ich habe überprüft und es hat gut funktioniert. Siehe Beitrag zur Erklärung. – MaxZoom

Der folgende Code helfen Sie werden kann.

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

Quelle

2015-09-14 00:52:24 Shakti

Wenn du auf die Schaltfläche für den DIV klickst, die bereits angezeigt wird, soll sie ihn verstecken. Dein Code behandelt diesen Fall nicht. – Barmar

ja, verpasste dies. Jetzt wird es wie erwartet funktionieren. Danke für Ihre Codezeile var eStyle = getComputedStyle (e) .getPropertyValue ('display'); – Shakti

Funktion, die testet, wenn DIV zeigt nur funktioniert das zweite Mal

Antwort

Verwandte Themen