addEventListener bzw. Funktion funktioniert nicht
0 0 Tabellenkalk
0 0 0 
dedlfix
1
0 0 Angabe der Zeichencodierung
Gunnar Bittersmann
addEventListener bzw. Funktion funktioniert nicht
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>
akzeptierte Antworten
addEventListener bzw. Funktion funktioniert nicht
Bewertung: +1, 1 Stimme
-
Tach,
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.
IIRC möchte addEventListener wissen, wie die Funktion heißt und nicht den Rückgabewert der Funktion haben: Der ()-Operator führt dazu dass die Funktion aufgerufen wird, ohne sollte es funktionieren.
mfg
Woodfighter -
Hallo,
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.
Meine Schlussfolgerung wäre eher, dass in der Funktion etwas nicht zur Verfügung steht, was beim direkten Verwenden vorhanden ist, z.B. this
Gruß
Kalk-
Hi, es ist beides, ohne die () wird die Funktion korrekt aufgerufen, allerding funktioniert "this" nicht mehr. kann mich jemand in die richtige Richtung schubsen?
wie ich innerhalb der funktion nun feststellen kann, wie der Status der checkbox ist?
gruss Markus
Hallo,
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.
Meine Schlussfolgerung wäre eher, dass in der Funktion etwas nicht zur Verfügung steht, was beim direkten Verwenden vorhanden ist, z.B. this
Gruß
Kalk-
Tach,
wie ich innerhalb der funktion nun feststellen kann, wie der Status der checkbox ist?
übergib deiner Funktion einen passenden Parameter, z.B. eine Referenz auf this.
mfg
Woodfighter-
Tach,
übergib deiner Funktion einen passenden Parameter, z.B. eine Referenz auf this.
beim zweiten Nachdenken fällt mir auf, was für einen Unsinn das ist.
mfg
Woodfighter
-
-
Tach!
wie ich innerhalb der funktion nun feststellen kann, wie der Status der checkbox ist?
Ein Eventhandler bekommt ein Event-Objekt übergeben. Das enthält auch eine Referenz auf das auslösende Objekt. Du musst das Event-Objekt in deiner Funktion entgegennehmen. Es kann auch noch gut sein, dass Browser unterschiedliche Event-Objekte liefern. Da musst du dir mal ein allgemeines Tutorial über Eventhandling anschauen.
dedlfix.
-
Hallo
Es kann auch noch gut sein, dass Browser unterschiedliche Event-Objekte liefern.
Bei IE <= Version 8 wäre das Event-Objekt
e.srcElement, aber wer benutzt die noch?Wohl nur noch etwa 1 Prozent der User...
Das kann man sich also eigentlich auch sparen und einfach
e.targetverwenden.Gruß,
HAL
-
Hallo HAL,
(cooler Nick, btw ;-)
Das kann man sich also eigentlich auch sparen und einfach
e.targetverwenden.s/kann/sollte/. IMHO.LG,
CK
-
-
-
Hallo
[...] ohne die () wird die Funktion korrekt aufgerufen [...]
Richtig. Ohne ( ). Die Funktion soll ja erst aufgerufen werden, wenn das Event eintritt.
wie ich innerhalb der funktion nun feststellen kann, wie der Status der checkbox ist?
var parent = document.getElementById('control_buttons'); parent.addEventListener('click', function (e) { var element = e.target; if (element.tagName === 'input') { var lang = element.getAttribute('data-lang'); alert (lang); alert( element.getAttribute('checked') ); alert ("test"); } });Etwa so in der Art sollte es funktionieren.
Im Übrigen fehlt das
title-Element und die Angabe zur Zeichenkodierung sollte vor den Style-Angaben am besten als erstes imheadstehen.Außerdem ist die Angabe
type="application/javascript"überflüssig, da die Browser ohnehin davon ausgehen, dass es sich bei dem Inhalt desscript-Elements um JS-Code handelt.Gruß,
HAL
-
-
-
Danke für die Tips.
Ich habe es jetzt so gelöst, innerhalb einer eigenen Funktion:
document.getElementById(this.getAttribute('id')).checked
alert (this.getAttribute('id')+': '+document.getElementById(this.getAttribute('id')).checked); -
@@Markus
<!DOCTYPE html> <html> <head> <style> […] </style> <meta charset="utf-8"/>Die Angabe der Zeichencodierung muss in den ersten 1024 Bytes des Quelltexts erfolgen. Sie sollte deshalb ganz zu Anfang im
headerfolgen.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
@Gunnar
Die Angabe der Zeichencodierung muss in den ersten 1024 Bytes des Quelltexts erfolgen. Sie sollte deshalb ganz zu Anfang im
headerfolgen.Doppelt hält besser:
„Im Übrigen fehlt das title-Element und die Angabe zur Zeichenkodierung sollte vor den Style-Angaben am besten als erstes im head stehen.“
Hoffentlich jedenfalls. ;-)
Gruß,
HAL
-
Danke für die Tips, das ist nur ein Grundgerüst, welches ich aus einem anderen Beispiel kopiert hatte. Und zum Testen nutze, werde aber der Vollständigkeits wegen, die Punkte trotzdem noch hinzufügen.
Das ganze kommt später in ein Wordpress-Plugin. Da wird dies ja sowieso alles autmatisch gemacht.
Ich finde es das Forum hier echt super, bin ja schon ewig immer auf den Seiten von Selfhtml. Aber erst seit kurzem hier im Forum. Und so gute und flotte Hilfe wie man hier bekommt, finde ich echt sehr gut von euch. Vorallem, weil man sich auch über so blöde Fehler wie bei mir mit dem Fehler in meinem IF/Then statt == nur ein = zu machen. In vielen anderen Foren wird man hier dann einfach für blöd hingestellt. Deshalb mal ein Herzliches Dankeschön an alle Helfer hier im Forum.
@Gunnar
Die Angabe der Zeichencodierung muss in den ersten 1024 Bytes des Quelltexts erfolgen. Sie sollte deshalb ganz zu Anfang im
headerfolgen.Doppelt hält besser:
„Im Übrigen fehlt das title-Element und die Angabe zur Zeichenkodierung sollte vor den Style-Angaben am besten als erstes im head stehen.“
Hoffentlich jedenfalls. ;-)
Gruß,
HAL
-
-