Bild durch Klick in DIV befördern / Counter erhöhen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Bild durch Klick in DIV befördern / Counter erhöhen

    Ich glaube ich brauche mal ne kleine Hilfe da ich mit Javascript noch nichts wirkliches am Hut hatte...

    Also ich bastele da grade was und hab 4 Div Boxen. Sieht so aus!

    Quellcode

    1. <div id="tresorcode_num1" style="width:101px; height:101px; border:#666666 solid 1px;" align="center"></div>


    Und davon halt 4...

    Jetzt hab ich bzw. möchte ich das man wenn man auf eine Zahl klickt diese in dem div steht also der erste klick in div tresorcode_num1 der zweite in div tresorcode_num1 usw...

    Da hab ich folgendes probiert: (Hab schon gehört das es Müll ist)



    Quellcode

    1. var counter = 0;
    3. function update_counter(){
    4. var counter = counter + 1;
    5. }
    6. function code(zahl){
    7. if(counter == 0) {
    8. document.getElementById("tresorcode_num1").innerHTML = "<img src=\"./img/buttons/" + zahl + ".png\">";
    9. update_counter();
    10. }
    11. if(counter == 1) {
    12. document.getElementById("tresorcode_num2").innerHTML = "<img src=\"./img/buttons/" + zahl + ".png\">";
    13. update_counter();
    14. }
    15. if(counter == 2) {
    16. document.getElementById("tresorcode_num3").innerHTML = "<img src=\"./img/buttons/" + zahl + ".png\">";
    17. update_counter();
    18. }
    19. if(counter == 3) {
    20. document.getElementById("tresorcode_num4").innerHTML = "<img src=\"./img/buttons/" + zahl + ".png\">";
    21. update_counter();
    22. }
    23. }
    Alles anzeigen


    Geht natürlich nicht.
    Ich hab natürlich grob im Hirn wie es gehen soll:

    Also der User klickt sagen wir mal auf 5 die 5 wird in das erste DIV geschrieben. Counter wird um 1 erhöht. Und das geht dann bis zum 4.
    Nebenbei sollen die geklickten Zahlen noch in ein Formular geschrieben werden welches nach einem Klick also wenn der Counter auf 4 steht abgeschickt wird...

    Ich hoffe ich bin wenigstens nahe dran & bitte um Hilfe! :lol:

  • Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html><head>
    3. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    4. <style type="text/css">
    5. <!--
    6. .rechner {
    7. width:60px;
    8. }
    9. .rechner div {
    10. border:1px solid #afafaf;
    11. width:15px;
    12. float:left;
    13. }
    14. .rechner div:hover {
    15. background-color:#efefef;
    16. }
    17. //-->
    18. </style>
    19. <script type="text/javascript">
    20. <!--
    21. var counter = 0;
    23. function update_counter(){
    24. counter = counter + 1;
    25. }
    27. function code(zahl){
    28. if(counter == 0) {
    29. document.getElementById("tresorcode_num1").innerHTML = zahl;
    30. document.getElementById("zahlen").value += zahl;
    31. update_counter();
    32. }
    33. else if(counter == 1) {
    34. document.getElementById("tresorcode_num2").innerHTML = zahl;
    35. document.getElementById("zahlen").value += zahl;
    36. update_counter();
    37. }
    38. else if(counter == 2) {
    39. document.getElementById("tresorcode_num3").innerHTML = zahl;
    40. document.getElementById("zahlen").value += zahl;
    41. update_counter();
    42. }
    43. else if(counter == 3) {
    44. document.getElementById("tresorcode_num4").innerHTML = zahl;
    45. document.getElementById("zahlen").value += zahl;
    46. update_counter();
    47. document.forms[0].submit();
    48. }
    49. }
    50. -->
    51. </script>
    52. <title>Test</title>
    54. </head><body>
    56. <div class="rechner">
    57. <div onclick="code(1)">1</div>
    58. <div onclick="code(2)">2</div>
    59. <div onclick="code(3)">3</div>
    60. <div onclick="code(4)">4</div>
    61. <div onclick="code(5)">5</div>
    62. <div onclick="code(6)">6</div>
    63. <div onclick="code(7)">7</div>
    64. <div onclick="code(8)">8</div>
    65. <div onclick="code(9)">9</div>
    66. <div onclick="code(0)">0</div>
    67. </div>
    69. <div style="clear: both" />&nbsp;</div>
    71. <div id="tresorcode_num1" style="width:101px; height:101px; border:#666666 solid 1px;text-align:center"></div>
    72. <div id="tresorcode_num2" style="width:101px; height:101px; border:#666666 solid 1px;text-align:center"></div>
    73. <div id="tresorcode_num3" style="width:101px; height:101px; border:#666666 solid 1px;text-align:center"></div>
    74. <div id="tresorcode_num4" style="width:101px; height:101px; border:#666666 solid 1px;text-align:center"></div>
    76. <form method="post">
    77. <input type="hidden" name="zahlen" id="zahlen" readonly="readonly" />
    78. </form>
    80. </body>
    81. </html>
    Alles anzeigen