2015-08-04 3 views
0

J'ai des problèmes de compréhension de la condition dans If statement [ou For lopp]. J'ai créé div qui joue comme le bouton Menu. Lorsque je clique sur ce bouton, tous les menus, y compris ce bouton Menu, sont affichés, mais le texte [paragraphe intérieur div] devient «Fermer menu». J'ai essayé de faire un peu de condition dans la fonction qui est allumée lorsque je clique sur le bouton Menu mais il semble que la condition ne fonctionne pas comme je le veux. Voici un exemple en boucle:Utiliser la propriété style d'un élément comme condition dans si ou pour une boucle javascript

function Show_mobile_menu() { 
for (; document.getElementById("Menu_button").style.cssText ="align-self:flex-end;" ;) { 
Func1(); } 
} 
for (; document.getElementById("Menu_button").style.cssText ="align-self: center;";) { 
Func2(); } 
} 

function Func1() { 
    document.getElementById("Menu").style.display = "flex"; 
    document.getElementById("Submenu").style.display = "flex"; 
    document.getElementById("Menu_button").style.cssText ="align-self: center;" 
    document.getElementById("Menu_button").getElementsByTagName("P")[0].innerHTML ="Close"; 
} 

function Func2() { 
    document.getElementById("Menu").style.display = "none"; 
    document.getElementById("Submenu").style.display = "none"; 
    document.getElementById("Menu_button").style.cssText ="align-self: flex-end;" 
    document.getElementById("Menu_button").getElementsByTagName("P")[0].innerHTML ="Menu"; 
} 

Bien sûr même chose est avec si la condition:

if (document.getElementById("Menu_button").style.cssText ="align-self:flex-end;" == true) { 
     Func1(); 
    } 

J'ai essayé la même chose avec si textContent = « Menu », puis faire ça ... Mais rien . Comme vous pouvez le voir, j'apprends le JavaScript et la syntaxe et la signification n'est toujours pas très claire. J'espère que quelqu'un pourrait éclaircir les choses pour moi.

+1

Tout d'abord, '=' affectera la valeur à la variable. Vous voulez utiliser '==' lorsque vous vérifiez l'égalité. – forgivenson

+0

Deuxièmement, je ne suis pas sûr de ce que vous essayez de faire avec ces boucles 'for'. Vous voulez probablement juste utiliser les instructions 'if'. Troisièmement, cette instruction 'if' que vous affichez devrait être' if (document.getElementById ("Menu_button"). Style.cssText == "align-self: flex-end;") '. Quatrièmement, vous devriez utiliser le débogueur dans votre navigateur et définir un point d'arrêt à cette instruction 'if', et voir ce que' cssText' est réellement égal. Ok – forgivenson

+0

@forgivenson, pourquoi est-ce mal, c'est pourquoi cela ne fonctionne pas: ' Titre de la page Cliquez sur moi!

Ceci est un en-tête

Ceci est un paragraphe.

' – Slit

Répondre

0

SOLUTION

Si vous voulez obtenir le style d'un élément que vous devez utiliser des méthodes appropriées. Je l'ai trouvé sur le site de MDN.

Exemple simple:

<!DOCTYPE html> 
<html> 
<style> 
h1 { 
background-color:pink; 
} 
</style> 
<body> 

<button type="Button" onclick="Test();">Click me!</button> 
<h1>This is a Heading</h1> 
<p>This is a paragraph.</p> 
<script> 
function Test() { 
var element = document.getElementsByTagName("h1")[0]; 
var stil = window.getComputedStyle(element).getPropertyValue("background-color"); 
    if (stil == "rgb(255, 192, 202)") { 
     alert("OK"); 
    } else { 
     alert("Not ok") 
    } 

} 
</script> 
</body> 
</html> 

Vous obtenez la valeur sous forme de rgb.