JavaScript: Ändern Sie die Textfarbe mit einer Schaltfläche. Jedes Mal, wenn Sie auf die Schaltfläche klicken, sollte ein anderer Stil angezeigt werden. Funktioniert nicht

Ich bin ziemlich neu in JavaScript. Ich habe gerade dieses einfache Skript:

[HTML code]

<html> 
<body> 

<script src="externalscript.js"></script> 

<p id="text">This text will change style</p><br> 
<button type="button" onclick="changeStyle()">Click me</button> 
</body> 
</html>

[JS code]

function changeStyle() { 

status = 1; 
x = document.GetElementById("text"); 

if(status==1) { 
    x.style.color = 'blue'; 
    status = 2; 
} 

if(status==2) { 
    x.style.color = 'red'; 
    status = 3; 
} 

if(status==3) { 
    x.style.color = 'yellow'; 
    status = 1; 
} 

}

ich es will den Text zu einem anderen Stil wird die Taste jedes Mal ändern geklickt . Dies funktioniert jedoch nicht. Könnte jemand erklären, wie man das richtig macht?

Quelle

2014-01-26 YSbakker

Es ist

getElementById("text")

nicht

GetElementById("text");

Auch wenn ich bekommen, was Sie versuchen zu erreichen, sollten Sie status = 1; außerhalb der Funktion setzen. Deklariere es als eine globale Variable, so dass du es in jedem if ändern kannst.

Auch Sie haben else_if statt if

DEMO

Quelle

2014-01-26 11:29:10 laaposto

Nun dank ändern, aber Sie vergessen zu beachten, dass ich "else if" statt "if" die ganze Zeit verwenden. Wie auch immer, danke für die Beantwortung meiner Frage, es funktioniert jetzt :) – YSbakker

Ich bin froh zu helfen. Du hast nicht erklärt, was du zu erreichen versuchst, also habe ich mich gefragt. Ich werde jetzt bearbeiten, dass ich weiß – laaposto

"Ich möchte es den Text zu einem anderen Stil jedes Mal, wenn die Schaltfläche geklickt wird ändern. Dies funktioniert jedoch nicht. Könnte jemand eine Möglichkeit erklären, dies richtig zu machen?" - Dies ist der Teil, wo ich es erklärt habe;) (Letzter Satz) – YSbakker

Versuchen Sie, diese zu nutzen:

status = 1; 
function changeStyle() { 
//Note the lowercase first letter. 
x = document.getElementById("text"); 

if(status==1) { 
    x.style.background-color = 'blue'; 
    status = 2; 
} 
else if(status==2) { 
    x.style.background-color = 'red'; 
    status = 3; 
} 
else if(status==3) { 
    x.style.background-color = 'yellow'; 
    status = 1; 
} 

}

Sie verwenden müssen 'else if', weil sonst der Browser, nachdem die Farbe zu ändern, springt sofort zum nächsten if-Block und denkt "nun, das stimmt jetzt" und führt diesen Code dann bis zum Ende des aktuellen Codes aus. Mit 'else if' weisen Sie den Browser an, die anderen 'if blocks' zu ignorieren, sobald der erste ausgewertet wurde.

Hoffe, das hilft.

Quelle

2014-01-26 11:30:38 mitchazj

Danke für die Erklärung in die Tiefe :) – YSbakker

Sie benötigen variable status=1 außerhalb der Funktion zu definieren, sonst jedes Mal, wenn die Taste klicken, um es zu 1.Also setzen müssen GetElementById("text"); zu getElementById("text");

status = 1; 
function changeStyle() {  

x = document.getElementById("text"); 

if(status==1) { 
    x.style.backgroundColor = 'blue'; 
    status = 2; 
} 
else if(status==2) { 
    x.style.backgroundColor = 'red'; 
    status = 3; 
} 
else if(status==3) { 
    x.style.backgroundColor = 'yellow'; 
    status = 1; 
} 

}

Quelle

2014-01-26 11:31:45

Danke für die Erklärung es in die Tiefe :) – YSbakker

JavaScript: Ändern Sie die Textfarbe mit einer Schaltfläche. Jedes Mal, wenn Sie auf die Schaltfläche klicken, sollte ein anderer Stil angezeigt werden. Funktioniert nicht

Antwort

Verwandte Themen