Variablen zu einem JavaScript-Ereignisaufruf hinzufügen? etwas zu tun, wie so

Question

Ich frage mich, ob es möglich ist:

HTML

<div id="myspace" class="thing"></div> 
<div id="mytable" class="thing"></div> 

JS

document.getElementById('my'+this).on('click', function(){ 
    document.getElementById(this).innerHTML = 'Chosen'; 
}); 

Die Logik ist, dass es zwei Boxen, erste Sein myspace, als zweites mytable. Wenn Sie auf eine der beiden Tasten klicken, wird in der Box innerHTML "Chosen" angezeigt.

Grundsätzlich würde ich gerne sehen, wenn ich vermeiden kann, mehrere Klickereignisse und/oder if-Anweisungen zu schreiben.

JSFiddle https://jsfiddle.net/7cLu9uah/

Answer 1

Sie können dies mit der delegierten Ereignisbehandlung tun, indem Sie einen gemeinsamen Event-Handler an einen Parent anhängen und dann mit dem angeklickten Element des One-Click-Handlers arbeiten.

document.getElementById("container").addEventListener('click', function(e) { 
 
    e.target.innerHTML = 'Chosen'; 
 
});

.thing {width: 100px; height: 20px; background:red; margin: 10px;}

<div id="container"> 
 
<div id="myspace" class="thing"></div> 
 
<div id="mytable" class="thing"></div> 
 
</div>

---

Auch in Ihrem Code, versuchen Sie .on() auf einem DOM-Elemente zu verwenden. Das funktioniert nicht. Vielleicht hast du Javascript mit jQuery verwechselt, das eine .on() Methode hat.

Und document.getElementById() nimmt eine Zeichenfolge, die mit der ID des Elements übereinstimmen sollte, das Sie suchen. Ihr Code ocument.getElementById('my'+this) ist keine ordnungsgemäße Verwendung.

---

DOM-Manipulationen wie diese sind oft einfacher, die jQuery-Bibliothek und Sie scheinen versucht zu sein, einige jQuery-Syntax mit .on() zu verwenden. Hier ist, was Sie in jQuery tun könnten:

$(".thing").on("click", function() { 
 
    this.innerHTML = "chosen"; 
 
})

.thing {width: 100px; height: 20px; background:red; margin: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="myspace" class="thing"></div> 
 
<div id="mytable" class="thing"></div>

Answer 2

Es gibt mehrere Probleme hier:

1. DOM-Elemente haben keine on Funktion. Es gibt eine on Funktion in jQuery und einigen anderen Bibliotheken, aber nicht im DOM. getElementById gibt ein DOM-Element zurück.

2. Diese Linie versucht this als ID zu verwenden:

   document.getElementById(this).innerHTML = 'Chosen'; 
   

   Während es unmöglich ist, ohne zu sagen, zu wissen, was on Sie versuchen, in der überwältigenden Mehrheit der Libs zu verwenden, in Ein auf diese Weise angeschlossener Event-Handler bezieht sich this auf das Element, nicht seine ID. Also:

   this.innerHTML = 'Chosen'; 
   

Answer 3

Sie können eine Klasse-Selektor:

function clickHandler(e) { 
    // `this` keyword refers to the clicked element 
    this.textContent = 'chosen'; 
} 

[].forEach.call(document.querySelectorAll('.thing'), function(el) { 
    el.addEventListener('click', clickHandler); 
}); 

Wenn Sie mehrere Elemente mit thing Klassennamen haben, und Sie wollen nicht zu einem Click-Handler, um sie zu befestigen Sie können den Selektor zu: '#mytable, #myspace' ändern.