1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Verschiedene funktionen ( Farbwechsel & +1€ -1€)

Dieses Thema im Forum "Stellenangebote/Projekte (unentgeltlich)" wurde erstellt von WebDesign72, 9. März 2017.

  1. WebDesign72

    WebDesign72 Grünschnabel

    Hallo,

    ich versuche mich seid einiger Zeit an ein paar Javascript Funktionen.

    1. beim klicken auf ein pixel den Farbwechsel --> welchen ich über den RESET Button nicht resetet bekomme.

    2. bei wiederholtem klicken auf ein Feld das zurück zählen des COUNTER -1€.


    ÜBERBLICK: Klick 1 (z.b. Feld ID 1) Farbwechsel & +1€ --> Klick 2 (z.b. Feld ID 1) Farbwechsel & -1€
    Klick auf Reset Button Reset alle Feld ID ( Farbe der ausgewählten Pixel und € anzeige ).


    und so sieht das ganze aus:

    Code (Text):
    1. <html>
    2.     <head>
    3. <style type="text/css">
    4. /*###########Pixel-Donator#############*/
    5.  
    6. .pixel-donator {
    7.     width: 1000px;
    8.     height: 1000px;
    9.     margin: 0px auto;
    10. }
    11. .z1, .z2 {
    12.     border: solid 1px #666666;
    13.     width: 8px;
    14.     height: 8px;
    15.     background-color: #D1D1D1;
    16.     padding: 0;
    17.     margin:0;
    18.     float:left;
    19. }
    20. .z-1:hover,
    21. .z-2:hover {
    22.     background: #00FFFF;
    23.     cursor: pointer;
    24. }
    25. </style>
    26.  
    27. <script type="text/javascript">
    28. /*######################  Farbwechsel ###########################*/
    29.  
    30. function colorchange1(id) {
    31.  
    32. var background1 = document.getElementById(id).style.backgroundColor;
    33.  
    34.     if (background1 == "blue") {
    35.         document.getElementById(id).style.backgroundColor = "#D1D1D1";
    36.     } else {
    37.         document.getElementById(id).style.backgroundColor = "blue";
    38.     }
    39. }
    40. </script>
    41.  
    42. <script type="text/javascript">
    43. /*#################  Zählerfunktion +1 &  Reset #####################*/
    44. var euro = " € ";
    45. var count = 0;
    46.  
    47. function addOne() {
    48.   count += 1;
    49.   document.getElementById('caseCount').value = count + euro;
    50. }
    51.  
    52. function resetCount() {
    53.   count = 0;
    54.   document.getElementById('caseCount').value = count + euro;
    55. }
    56.  
    57. </script>
    58.  
    59. </head>
    60. <body>
    61.  
    62. <input class="preis_preis" id="caseCount" name="wert" readonly value="0 &euro;" />
    63.  
    64. <button onmousedown="resetColorchange()" onclick="resetCount()" >Reset</button>
    65.  
    66. <div class="pixel-donator">
    67.  
    68.   <!-- Anfang   -------  Reihe 1    -------  100px  -->
    69.  
    70.   <div class="z1" id="    1    " onmousedown="colorchange1('    1    ')" onClick="addOne()"></div>
    71.   <div class="z2" id="    2    " onmousedown="colorchange1('    2    ')" onClick="addOne()"></div>
    72.   <div class="z1" id="    3    " onmousedown="colorchange1('    3    ')" onClick="addOne()"></div>
    73.   <div class="z2" id="    4    " onmousedown="colorchange1('    4    ')" onClick="addOne()"></div>
    74.   <div class="z1" id="    5    " onmousedown="colorchange1('    5    ')" onClick="addOne()"></div>
    75.  
    76.   <!-- Ende   -------  Reihe 1  -------  100px  -->
    77.  
    78. </div>
    79. </body>
    80. </html>

    vielen Dank schon mal vorab!
     
  2. DerKleene1

    DerKleene1 Mitglied

    Falls ich Dich richtig verstanden habe:
    HTML:
    1.     <head>
    2.         <style type="text/css">
    3.         .pixel-donator {
    4.         width: 1000px;
    5.         height: 1000px;
    6.         margin: 0px auto;
    7.         }
    8.         .z1, .z2 {
    9.         border: solid 1px #666666;
    10.         width: 8px;
    11.         height: 8px;
    12.         background-color: #D1D1D1;
    13.         padding: 0;
    14.         margin:0;
    15.         float:left;
    16.         }
    17.         .z-1:hover,
    18.         .z-2:hover {
    19.         background: #00FFFF;
    20.         cursor: pointer;
    21.         }
    22.         </style>
    23.     </head>
    24.     <body>
    25.         <input class="preis_preis" id="caseCount" name="wert" readonly value="0 &euro;" />
    26.         <button onclick="resetCount()" >Reset</button>
    27.  
    28.         <div class="pixel-donator">
    29.             <div class="z1" id="1" onclick="colorchange1('1')"></div>
    30.             <div class="z2" id="2" onclick="colorchange1('2')"></div>
    31.             <div class="z1" id="3" onclick="colorchange1('3')"></div>
    32.             <div class="z2" id="4" onclick="colorchange1('4')"></div>
    33.             <div class="z1" id="5" onclick="colorchange1('5')"></div>
    34.         </div>
    35.  
    36.         <script type="text/javascript">
    37.         var euro = " € ";
    38.         var count = 0;
    39.  
    40.         function colorchange1(id) {
    41.             var background1 = document.getElementById(id).style.backgroundColor;
    42.  
    43.             if (background1 == "blue") {
    44.                 document.getElementById(id).style.backgroundColor = "#D1D1D1";
    45.                 count -= 1;
    46.                 document.getElementById('caseCount').value = count + euro;
    47.             } else {
    48.                 document.getElementById(id).style.backgroundColor = "blue";
    49.                 count += 1;
    50.                 document.getElementById('caseCount').value = count + euro;
    51.             }
    52.         }
    53.  
    54.         function resetCount() {
    55.             count = 0;
    56.             document.getElementById('caseCount').value = count + euro;
    57.  
    58.             var elements = document.getElementsByClassName("z1");
    59.             for(var i = elements.length - 1; i >= 0; --i)    {
    60.                 elements[i].style.backgroundColor = "#D1D1D1";
    61.             }
    62.  
    63.             var elements = document.getElementsByClassName("z2");
    64.             for(var i = elements.length - 1; i >= 0; --i)    {
    65.                 elements[i].style.backgroundColor = "#D1D1D1";
    66.             }
    67.         }
    68.         </script>
    69.     </body>
    70. </html>
     
  3. WebDesign72

    WebDesign72 Grünschnabel

    Wow Vielen Dank <3!!!!! Das ist Perfekt!!!!