2016-08-01 14 views
1

Ich arbeite auf einer Website, wo die Person, die es eingeben, mit einem Bild bei Laden aufgefordert werden muss. Dieses Bild ist wie jedes Bild, aber anscheinend wird es nicht angezeigt. Ich habe eine onLoad-Funktion und eine onClick-Funktion, so dass der Benutzer, sobald das Bild angezeigt wird, einfach auf das Bild klicken kann und dann theoretisch verschwinden sollte. Ich habe eine Variable, die von Anfang an "falsch" ist und dann, sobald die Seite geladen ist, soll es zu "wahr" wechseln und dann, wenn das Bild geklickt wird, soll es wieder "falsch" werden. Auf diese Weise sollte es ziemlich einfach sein zu kontrollieren, ob das Bild angezeigt wird oder nicht.Bild wird nicht auf onLoad Funktion angezeigt

Ich bin nicht ganz sicher, was falsch ist, da alles für mich richtig scheint.

Hier ist mein Code.

var popUP = false; 
 

 
function popUpOpen() { 
 
    var popUp = true; 
 
} 
 

 
function popUpClose() { 
 
    var popUp = false; 
 
} 
 

 
if (popUp = true) { 
 
    document.getElementById('popUpStart').style.visibility = 'visible'; 
 
} else { 
 
    document.getElementById('popUpStart').style.visibility = 'hidden'; 
 
}
#popUpStart { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -325px; 
 
    margin-top: -220px; 
 
    z-index: 3; 
 
}
<body onload="popUpOpen()"> 
 

 
    <img id="popUpStart" src="popUpOnLoad.png" style="visibility:hidden" onclick="popUpClose()" /> 
 

 
</body>

+2

ändern 'var popUp = true;' zu 'popUp = true;' auch 'style.visibility' Funktionen sollten nach onload aufrufen –

+1

@FastSnail, ich schätze die schnelle Antwort, meinst du auf die variable Anweisung am Anfang oder in den Funktionsanweisungen gleich danach? – DevLiv

+0

Sie deklarieren eine Variable, die sich im äußeren Bereich befand. Entferne die Variable in den Wenns. Do Neuzuweisung, nicht Neueinstufung. == wird zum Vergleich verwendet. – Li357

Antwort

5

Ihr Problem ist, dass der Code, wenn popUp prüft wahr ist oder nicht genau einmal ausgeführt wird, bevor Beiladen geschieht auch. Sie können den Wert von popUp ändern, dies ändert jedoch nicht die Sichtbarkeit des Bildes.

Sie wollen so etwas wie:

var popUp = false; 

function updateImage() 
{ 
    if (popUp === true) { 
     document.getElementById('popUpStart').style.visibility='visible'; 
    } else { 
     document.getElementById('popUpStart').style.visibility='hidden'; 
    } 
} 

function popUpOpen(){ 
    popUp = true; 
    updateImage(); 
} 

function popUpClose() { 
    popUp = false; 
    updateImage() 
} 

Beachten Sie, dass die Änderungen zu entfernen "var" in den Funktionen, und mit "===" anstelle von "=" im Vergleich.

+1

vielen Dank! Es funktioniert jetzt wie ein Zauber. – DevLiv