# Einkaufswelten -\> Code-Element -\> JavaScript -\> EventListener
**URL:** https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496
**Category:** Allgemein
**Created:** [10. Dezember 2020 um 20:08 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496 "2020-12-10T20:08:35Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@10083349](https://forum.shopware.com/u/10083349)
#### Post date: [10. Dezember 2020 um 20:08 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/1 "2020-12-10T20:08:35Z")
Hallo,
ich möchte eine Seite mit einer interaktiven Produktbeschreibung erstellen. In meiner Testumgebung läuft es.
Um es in Shopware einzubauen, habe ich die Styles in eine Less-Datei gepackt, den HTML- und JavaScript-Code in das Code-Element einer Einkaufswelt.
Leider funktionieren die EventListener nicht ( .addEventListener). Woran liegt das? Was habe ich übersehen?
---
### Author:  [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [10. Dezember 2020 um 23:36 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/2 "2020-12-10T23:36:37Z")
wann wird denn dein EventListener eingeführt? Hinweis:
document.asyncReady(function(){} )
Zeig mal etwas Code.
---
### Author:  [@10083349](https://forum.shopware.com/u/10083349)
#### Post date: [11. Dezember 2020 um 07:03 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/3 "2020-12-11T07:03:14Z")
Hier etwas Code:
```
_document_.getElementById( **"stnyClose01"** ).addEventListener( **"click"** ,_stnyClose01_); _document_.getElementById( **"stnyClose01"** ).addEventListener( **"mouseover"** ,_stnyCloseFill01_); _document_.getElementById( **"stnyClose01"** ).addEventListener( **"mouseout"** ,_stnyCloseUnFill01_); **function** _stnyClose01_() {_document_.getElementById( **"stny-Div-For-Main"** ). **style**. **visibility** = **"hidden"** ;} **function** _stnyCloseFill01_() {_document_.getElementById( **"stnyCloseCr01"** ). **style**. **animation** = **"stnyAniCloseMOver 1s forwards"** ;} **function** _stnyCloseUnFill01_() {_document_.getElementById( **"stnyCloseCr01"** ). **style**. **animation** = **"stnyAniCloseMOut 1s forwards"** ;}
```
---
### Author:  [@10083349](https://forum.shopware.com/u/10083349)
#### Post date: [11. Dezember 2020 um 08:45 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/4 "2020-12-11T08:45:09Z")
Ich habe den Code unter public -\> src -\> js eingetragen.
```
document.asyncReady( **function** () { console.log( **"Hello World 01"** ); document.getElementById( **"stnyProduktBeschreibung"** ).addEventListener( **"click"** , **function** () { console.log( **"Hello World 02"** ); document.getElementById( **"stnyProduktBeschreibung"** ).innerHTML = **"Yepp!"** ; console.log( **"Hello World 03"** ); }) });
```
Der erste console.log-Befehl **„Hello World 01“** wird ausgeführt. Danach heißt es nur noch „document.getElementById(…) is null“.
Im Code-Element der Einkaufswelt steht lediglich:
#
Produktbeschreibung
---
### Author:  [@10083349](https://forum.shopware.com/u/10083349)
#### Post date: [11. Dezember 2020 um 08:51 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/5 "2020-12-11T08:51:23Z")
---
### Author:  [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [11. Dezember 2020 um 15:14 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/6 "2020-12-11T15:14:02Z")
Ich tipper darauf, dass deine EKW mit Ajax geladen wird und zu diesem Zeilpunkt noch nicht im DOM bereit steht.
---
### Author:  [@10083349](https://forum.shopware.com/u/10083349)
#### Post date: [12. Dezember 2020 um 15:28 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/7 "2020-12-12T15:28:59Z")
Dankk’ Dir. Jetzt läuft es.
- In Shopware müssen die Schleifen ein Leerzeichen zwischen dem Kleinerzeichen und dem „x“ haben. So geht es nicht: for (i=0; i\
- ich hatte ein paar größere SVG-Definitionen ans Ende des Codes abgelegt. Beim Abspeichern des Code-Elements wurde das alles mit übernommen.
Nur wenn ich die Einkaufwelt abgespeichert hatte, wurde der Code irgendwo abgeschnitten. Die HTML-Tags war nicht mehr komplett und es lief nicht mehr viel.
Die Anzahl der Zeilen im Code-Element scheint begrenzt zu sein.
- den Javascript-Code muss im Code-Element untergebracht sein. Sonst vergisst Shopware, dass die Funktionen bereits definiert wurden.
---
### Author:  [@10083349](https://forum.shopware.com/u/10083349)
#### Post date: [12. Dezember 2020 um 15:37 UTC](https://forum.shopware.com/t/einkaufswelten-code-element-javascript-eventlistener/71496/8 "2020-12-12T15:37:32Z")
leider sieht es im Editor ganz anders aus als hinterher im Post.
Ich versuche es noch einmal: Es muss heißen:
for (i=0; i “smaller than” x.length; i++) {…}
und vor dem x muss ein Leerzeichen sein.