addEventListener bzw. Funktion funktioniert nicht von Markus, 22.07.2015 12:04

addEventListener bzw. Funktion funktioniert nicht

Markus 22.07.2015 12:04

Hallo zusammen, ich bin es mal wieder ;-)

ich versuche einer Checkbox per "addEventListener" eine Funktion zuzuweisen.

Wenn ich den Inhalt der Funktion "checkbox_geklickt()" direkt in bei "addEventListener" einfüge, funktioniert alles, daher denke ich dass meine Funktion "checkbox_geklickt()" entweder an der falschen Stelle steht oder ich habe im "addEventListener" einen Fehler.

Wäre für Hilfe dankbar ;-)

Hier der Seitenquelltext(aus Firefox) und ganz unten den Orginalcode mit PHP

<!DOCTYPE html>
<html>
 <head>
  <style>
      body {
        margin: 0px;
        padding: 0px;
      }

      
      canvas {
        position: absolute;
        top: 50px;
        left: 170px;
        'background-color: green;
        z-index: 2;
      }
            
      #controll_canvas {
        position: absolute;
        z-index: 50;
        'top: 50px;
        'left: 50px;
        'background-color: green;
        
      }
      #controll_buttons {
        position: absolute;
        z-index: 999;
        'top: 50px;
        'left: 50px;
        'background-color: green;
        
      }
      button {
        position: relative;
        z-index: 999;
      }      
      
    </style>
  <meta charset="utf-8"/>
  <script type="application/javascript">
  
    function checkbox_geklickt() {
            var lang = this.getAttribute('data-lang');

            alert (lang);
            alert(this.getAttribute('checked'));
            alert ("test");
    }
  
  
    function draw() {
    
         var checkbox1 = document.getElementById('checkbox1');
         checkbox1.addEventListener('click', checkbox_geklickt());

         var checkbox2 = document.getElementById('checkbox2');
         checkbox2.addEventListener('click', checkbox_geklickt());

         var checkbox3 = document.getElementById('checkbox3');
         checkbox3.addEventListener('click', checkbox_geklickt());

         var checkbox4 = document.getElementById('checkbox4');
         checkbox4.addEventListener('click', checkbox_geklickt());

         var checkbox5 = document.getElementById('checkbox5');
         checkbox5.addEventListener('click', checkbox_geklickt());

    
/*    
         var checkbox999999 = document.getElementById('checkbox1');
         checkbox999999.addEventListener('click', function() {
      
             var lang = this.getAttribute('data-lang');

             alert (lang)
        
         });   
   
   
    
          var canvas1 = document.getElementById("canvas1");
          var checkbox1 = document.getElementById("checkbox1");

      


      if(canvas3.getContext){
        var context = canvas3.getContext("2d");
            context.fillStyle = "#FF0000";
            context.beginPath();
            context.arc(993, 704, 2, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();
        } */
    }

 

    
  </script>
 </head>
 <body onload="draw();">


  <div id="controll_canvas" >
<canvas id="canvas9999" width="1300" height="1300" style="visibility:visible;background-color: #CCFFCC;"></canvas>
<canvas id="canvas1" width="1300" height="1300" style="visibility:hidden;"></canvas>
<canvas id="canvas2" width="1300" height="1300" style="visibility:hidden;"></canvas>
<canvas id="canvas3" width="1300" height="1300" style="visibility:hidden;"></canvas>
<canvas id="canvas4" width="1300" height="1300" style="visibility:hidden;"></canvas>
<canvas id="canvas5" width="1300" height="1300" style="visibility:hidden;"></canvas>
    

   </div>
   <div id="controll_buttons">

<input type="checkbox" id="checkbox1" data-lang="1"> <label for ="checkbox1"> Canvas 1 ausschalten </label></br>
<input type="checkbox" id="checkbox2" data-lang="2"> <label for ="checkbox2"> Canvas 2 ausschalten </label></br>
<input type="checkbox" id="checkbox3" data-lang="3"> <label for ="checkbox3"> Canvas 3 ausschalten </label></br>
<input type="checkbox" id="checkbox4" data-lang="4"> <label for ="checkbox4"> Canvas 4 ausschalten </label></br>
<input type="checkbox" id="checkbox5" data-lang="5"> <label for ="checkbox5"> Canvas 5 ausschalten </label></br>
 
    
    </div>
 </body>
</html>

Und hier der Original Quellcode

<!DOCTYPE html>
<html>
 <head>
  <style>
      body {
        margin: 0px;
        padding: 0px;
      }

      
      canvas {
        position: absolute;
        top: 50px;
        left: 170px;
        'background-color: green;
        z-index: 2;
      }
            
      #controll_canvas {
        position: absolute;
        z-index: 50;
        'top: 50px;
        'left: 50px;
        'background-color: green;
        
      }
      #controll_buttons {
        position: absolute;
        z-index: 999;
        'top: 50px;
        'left: 50px;
        'background-color: green;
        
      }
      button {
        position: relative;
        z-index: 999;
      }      
      
    </style>
  <meta charset="utf-8"/>
  <script type="application/javascript">
  
    function checkbox_geklickt() {
            var lang = this.getAttribute('data-lang');

            alert (lang);
            alert(this.getAttribute('checked'));
            alert ("test");
    }
  
  
    function draw() {
    
<?php    
         for ($i = 1; $i <= 5; $i++) {
//echo 'checkbox'.$i.'.addEventListener (\'click\', checkbox_geklickt);'."\n";

echo '         var checkbox'.$i.' = document.getElementById(\'checkbox'.$i.'\');'."\n";

echo'         checkbox'.$i.'.addEventListener(\'click\', checkbox_geklickt());'."\n\n";



/*
echo'   

    checkbox'.$i.'.addEventListener(\'click\', function() {
      
            var lang = this.getAttribute(\'data-lang\');
            
            alert (lang);
            alert(this.getAttribute(\'checked\'));
    }); 


     ';

*/
  

}
?>    
/*    
         var checkbox999999 = document.getElementById('checkbox1');
         checkbox999999.addEventListener('click', function() {
      
             var lang = this.getAttribute('data-lang');

             alert (lang)
        
         });   
   
   
    
          var canvas1 = document.getElementById("canvas1");
          var checkbox1 = document.getElementById("checkbox1");

      


      if(canvas3.getContext){
        var context = canvas3.getContext("2d");
            context.fillStyle = "#FF0000";
            context.beginPath();
            context.arc(993, 704, 2, 0, Math.PI * 2, true);
            context.closePath();
            context.fill();
        } */
    }

 
<?php 

/*
for ($i = 1; $i <= 5; $i++) {
echo '
    function canvas'.$i.'_aus() {
        if(canvas'.$i.'.style.visibility == \'visible\'){
        canvas'.$i.'.style.visibility=\'hidden\';
        document.getElementById("button'.$i.'").childNodes[0].nodeValue="Canvas '.$i.' einschalten";
        } else {
        canvas'.$i.'.style.visibility=\'visible\';
        document.getElementById("button'.$i.'").childNodes[0].nodeValue="Canvas '.$i.' ausschalten";
        }
    }
      ';
}

*/


?>

    
  </script>
 </head>
 <body onload="draw();">


  <div id="controll_canvas" >
<?php
  echo '<canvas id="canvas9999" width="1300" height="1300" style="visibility:visible;background-color: #CCFFCC;"></canvas>'."\n";
  for ($i = 1; $i <= 5; $i++) {
  echo '<canvas id="canvas'.$i.'" width="1300" height="1300" style="visibility:hidden;"></canvas>'."\n";
  }
?>
    

   </div>
   <div id="controll_buttons">

<?php
   for ($i = 1; $i <= 5; $i++) {
    //echo '<button id ="button'.$i.'" onclick="canvas'.$i.'_aus()">Canvas '.$i.' ausschalten</button> </br>'."\n";
    echo '<input type="checkbox" id="checkbox'.$i.'" data-lang="'.$i.'"> <label for ="checkbox'.$i.'"> Canvas '.$i.' ausschalten </label></br>'."\n";
    }
?> 
    
    </div>
 </body>
</html>