Button backgorund-color onclick change

Ich habe ein Problem mit einem einfachen Skript. Ich versuche, die Hintergrundfarbe eines Buttons zu ändern, wenn Sie darauf klicken. Ich habe hier gesucht und gegoogelt. Nach dem, was ich gefunden habe, ist an meinem Skript nichts falsch. Kannst du mir helfen, dieses Problem zu lösen?Button backgorund-color onclick change

Das ist mein CSS-Stylesheet:

body { 
    height: 100% 100vh; 
    background: linear-gradient(90deg, #122221 50%, #116699 50%); 
} 
#btn { 
    background-color: white; 
    width: 200px; 
    height: 100px; 
}

und das ist mein html:

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<html lang="en-US"> 

<html> 
    <head> 
     <link rel="stylesheet" href="learning.css"> 
     <script> 
      function foo(){ 
       var x = document.getElementById("btn"); 
       if (x.style.background-color == "white"){ 
        x.style.background-color = "green"; 
       } 
       else { 
        x.style.background-color = "white"; 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <button id = "btn" onclick = "foo()"> click me </buttonM> 
    </body> 
</html>

Quelle

2017-04-13 4SapH

Das Problem ist mit x.style.background-color. Stattdessen sollten Sie x.style.backgroundColor verwenden

function foo(){ 
 
       var x = document.getElementById("btn"); 
 
       if (x.style.backgroundColor == "white"){ 
 
        x.style.backgroundColor = "green"; 
 
       } 
 
       else { 
 
        x.style.backgroundColor = "white"; 
 
       } 
 
      }

#btn { 
 
    background-color: white; 
 
    width: 200px; 
 
    height: 100px; 
 
}

<button id = "btn" onclick = "foo()"> click me </buttonM>

Quelle

2017-04-13 14:19:51

Die background-colorbackgroundColor werden sollten:

function foo(){ 
    var x = document.getElementById("btn"); 

    if (x.style.backgroundColor == "white") 
    { 
    x.style.backgroundColor = "green"; 
    } 
    else { 
    x.style.backgroundColor = "white"; 
    } 
}

HINWEIS:style.backgroundColor wird eine leere Zeichenfolge für den ersten Klick so besser zurückkehren zu verwenden getComputedStyle so wird es den Stil angefügt t zurückgeben o das Element aus dem CSS.

Hoffe, das hilft.

Snippet getComputedStyle(Werke aus dem ersten Klick):

function foo(){ 
 
    var x = document.getElementById("btn"); 
 
    var bg_color = window.getComputedStyle(x,null).getPropertyValue("background-color"); 
 

 
    if (bg_color == "rgb(255, 255, 255)") 
 
    { 
 
     x.style.backgroundColor = "green"; 
 
    } 
 
    else { 
 
     x.style.backgroundColor = "white"; 
 
    } 
 
}

body { 
 
    height: 100% 100vh; 
 
    background: linear-gradient(90deg, #122221 50%, #116699 50%); 
 
} 
 
#btn { 
 
    background-color: white; 
 
    width: 200px; 
 
    height: 100px; 
 
}

<button id="btn" onclick = "foo()"> click me </button>

Quelle

2017-04-13 14:20:07

Syntax falsch war sein style.backgroundColor nicht mit style.background-color .und einfach mit einzelner Zeile, wenn die Bedingung verwenden. genau wie unten Schnipsel

function foo() { 
 
    var x = document.getElementById("btn"); 
 
    x.style.backgroundColor = x.style.backgroundColor == "white" ? "green" : "white"; 
 
}

body { 
 
    height: 100% 100vh; 
 
    background: linear-gradient(90deg, #122221 50%, #116699 50%); 
 
} 
 

 
#btn { 
 
    background-color: white; 
 
    width: 200px; 
 
    height: 100px; 
 
}

<body> 
 
    <button id="btn" onclick="foo()"> click me </buttonM> 
 
    </body>

Quelle

2017-04-13 14:21:31 prasanth

Sie haben einen Fehler in der JavaScript. Sie können Hintergrundfarbe verwenden, aber Sie haben es zu zitieren und setzen es wie so Klammern:

<!DOCTYPE html> 
 
<meta charset="UTF-8"> 
 
<html lang="en-US"> 
 

 
<html> 
 
    <head> 
 
     <link rel="stylesheet" href="learning.css"> 
 
     <script> 
 
      function foo(){ 
 
       var x = document.getElementById("btn"); 
 
       if (x.style['background-color'] == "white"){ 
 
        x.style['background-color'] = "green"; 
 
       } 
 
       else { 
 
        x.style['background-color'] = "white"; 
 
       } 
 
      } 
 
     </script> 
 
    </head> 
 

 
    <body> 
 
     <button id = "btn" onclick = "foo()"> click me </buttonM> 
 
    </body> 
 
</html>

Quelle

2017-04-13 14:28:10 gforce301

Button backgorund-color onclick change

Antwort

Verwandte Themen