Farbe eines Pixels mit hilfe eines onClick events zwei mal ändern.

WebDesign72

Grünschnabel
Ich habe mir ein Script im Internet gesucht welches den Text bei einem onclick ändert und bei einem zweiten onclick wieder zurück ändert.

Ich würde gerne die Farbe eines Pixels ändern.


Text Script ( dieses Script funktioniert ):
Code:
 <script type="text/javascript">

      function change_text()

          {

              if(document.getElementById("toggle_button").innerHTML=="Click here for more information!")

              {

                  document.getElementById("toggle_button").innerHTML="Click here for less information!";

              }

              else

              {

                  document.getElementById("toggle_button").innerHTML="Click here for more information!";

              }

          }

</script>
HTML:
<a href='javascript:void(0)' onclick="change_text()"><p id="toggle_button" >Click here for more information!</p></a>


Mein Pixel Script ( dieses Script funktioniert nicht):
Code:
<script type="text/javascript">

  function change_text()

      {

            if(document.getElementById("2a").style.backgroundColor == "#F4FFF4")

          {

              document.getElementById("2a").style.backgroundColor = "#666666";

          }

              else

          {

              document.getElementById("2a").style.backgroundColor = "#F4FFF4";

          }

     }

</script>


HTML:
<a href='javascript:void(0)' onclick="change_text()" class="z-2" id="2a"></a>


Kann mir jemand sagen wo der Fehler ist?
 
Zuletzt bearbeitet:
Hallo,
Thema ist gelöst? Also keine Antwort mehr?
Aber so geht es:
HTML:
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <a href='javascript:void(0)' onclick="change_text()"><p id="toggle_button" >Click here for more information!</p></a>
        <a href='javascript:void(0)' onclick="change_text1()" class="z-2" id="2a";>Test</a>
    <script type="text/javascript">

     function change_text() {
         if(document.getElementById("toggle_button").innerHTML=="Click here for more information!"){
             document.getElementById("toggle_button").innerHTML="Click here for less information!";
         }else{
             document.getElementById("toggle_button").innerHTML="Click here for more information!";
        }
    }

    function change_text1(){
        var dc = document.getElementById("2a").style.backgroundColor;
        if(dc != "rgb(102, 102, 102)" || dc == ""){
            document.getElementById("2a").style.backgroundColor = "#666";
        }else{
            document.getElementById("2a").style.backgroundColor = "#F4FFF4";
        }
    }

    </script>

</body>
 

Neue Beiträge

Zurück