Beiträge von Sempervivum

Wenn ich mir dein HTML ansehe, liegen beide Klassen auf dem selben Element. Dann musst Du es so notieren:

.epct_button.epct_product_compare_button {
    background: #FDD247 ;
}

Dein Code sieht ja so aus:

var btnClick = function(){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  const test = document.querySelector('.btn')
  output.innerText = 'Klick: ' +  this.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', btnClick);
});

Wenn Du elem und index an die Funktion btnClick übergeben willst, kannst Du diese Funktion nicht als Referenz übergeben sondern musst die Parameter explizit übergeben:

var btnClick = function(elem, index){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  //const test = document.querySelector('.btn')
  output.innerText = 'Klick: ' +  elem.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', function() {
    btnClick(elem, index);
  });
});

Wenn Du die Funktion als Referenz übergibst, hast Du jedoch Zugriff auf den geklickten button über this :

var btnClick = function(){
  const output = document.getElementById('ausgabe');
  
  //let nodeItem = elem.item(index)
  
  //const test = document.querySelector('.btn')
  //Unter this hast Du Zugriff auf den Button, der geklickt wurde:
  output.innerText = 'Klick: ' +  this.innerText;
  
};

document.querySelectorAll('.btn').forEach( function (elem, index) {
  elem.addEventListener('click', btnClick);
});

Der Validator beanstandet es nicht, wenn Leerzeichen um die Tilde herum sind und auch meinen Browser (Opera) stört es nicht.

Zitat

dass das Feld NAME doch Zahlen durchgehen lässt, obwohl ich mit preg_matsch nur Buchstaben zulasse

"/^[a-zA-Z äöüßáéíóú]/"

Das liegt daran, dass Du nicht bis zum Stringende prüfst, so wird nur das erste Zeichen gecheckt. Dies sollte funktionieren: "/^[a-zA-Z äöüßáéíóú]+$/"

Zitat

kannst du den Pfad mittels PHP auslesen und an dein JavaScript Script senden lassen.

Keine Ahnung, wie das funktionieren soll. Der Code im Eingangsposting liest die Datei lokal und speichert sie auch lokal.

Zitat

Dies geht dann so : #firstelement:hover .braun{

background-color: red;

}

Leider funktioniert dies jedoch nicht

Das hängt vom HTML ab. Ich nehme mal an, dass die .braun nachfolgende Geschwisterelemente sind. Dann muss man statt eines Leerzeichens eine Tilde im Selektor verwenden:

#firstelement:hover~.braun {
   background-color: red;
}

Wenn ich das richtig sehe, wird das PHP ja auch geparst, wenn Du die Dateien mit Ajax lädst. Also einfach die Includes in body.php und body_mobile.php drin lassen und es sollte funktionieren.

Ich sehe, Du hast jQuery gar nicht eingebunden, dann kann es nicht funktionieren.

Das Skript im Head war schon OK.

Beim Durchlesen deines Codes kann ich keine Fehler erkennen. Ajax, und dieses jQuery-load ist ja Ajax, braucht jedoch einen Webserver, wenn Du die Datei einfach mit file: öffnest, wird es nicht funktionieren. Die Console müsste entsprechende Hinweise geben.

Nein, so geht das nicht, das PHP muss ja schon auf dem Server zur Verfügung stehen, wenn Du auf dem Client bist und mit Javascript arbeitest, ist es zu spät.

Mache es genau wie mit dem Inhalt von body: Die URL abhängig von der Fensterbreite zur Verfügung stellen und mit jQuery-load in den Header hinein laden.

Zitat

dass ich immer manuell den Ordner auswählen muss und das Script nicht die Datei im gleichen Ordner wieder speichert, aus dem ich die Datei geladen habe.

Hat jemand vlt. Eine Idee wie man das machen kann?

Leider nicht: Aus Sicherheitsgründen ist der Pfad, aus dem eine Datei geladen wird, in Javascript nicht verfügbar.

Ganz so einfach ist es nicht, denn das audio-Element unterstützt keine Playlists, diese muss man selber bauen. Du findest aber Beispiele im Netz.

Und wenn Du die Dateien aus einem Verzeichnis auslesen und in der Playlist verwenden willst, brauchst Du PHP. Mit der Funktion glob() kannst Du die Dateien auslesen und daraus die Struktur generieren, die deine Playlist braucht.

Oh, mein Fehler, dass muss in Anführungszeichen.

Nein, da bist Du jetzt etwas auf dem falschen Wege. Die forEach-Schleife auf das Ergebnis von querySelectorAll() anwenden:

document.querySelectorAll(.btn).forEach(function(item, idx) {
    item.addEventListener('click', btnClick);
});

In der Funktion btnClick hast Du dann wieder über this Zugriff auf den geklickten Button. Oder alternativ über event.target.

Zitat

Nach einigen recherche habe ich etwas gefunden mit querySelectorAll(); denke das es ein falscher weg ist.

Ich denke, dass das genau der richtige Weg ist. Mit querySelectorAll() kannst Du eine Liste der Elemente erzeugen, wenn Du die Klasse als Selektor verwendest. Dann kannst Du mit einer forEach-Schleife diese Elemente abarbeiten und mit der Funktion addEventListener() deine Funktion btnClick registrieren.

In der Console werden Hinweise und Fehlermeldungen ausgegeben, häufig sehr hilfreich. Drücke F12 in IE/Edge oder Strg+Umsch+I

Überprüfe mal deinen Pfad:

<script src="/java1.js"></script>

Wenn Du einen Schrägstrich davor hast, wird die Datei im Wurzelverzeichnis deiner HP gesucht. Liegt sie dort auch?

Wirf einen Blick in die Console, u. U. findest Du dort Hinweise.

Zitat

die .width() geht doch nach pixeln, desktop hier 1920, was wäre wenn ein gutes händy display auch zb > 1400 wäre

Keine Sorge, man muss dabei zwischen der physikalischen Auflösung und den CSS-Pixeln unterscheiden, siehe hier:

https://webplatform.github.io/docs/tutorials…ding-css-units/

Ich hoffe Mal, dass $(window).width() die CSS-Pixel liefert, werde ich mal untersuchen.

Du kannst natürlich auch clientseitig die Fensterbreite abfragen und gleich die richtige Seite holen:

$(document).ready( function() {
    var height = $(window).height();
    var width = $(window).width();
    if (width > 600) url = 'body.php'; else url = 'body_mobile.php';
    $('body').load(url);
});

AFAIK hat man von PHP aus keinen Zugriff auf die Abmessungen des Browserfensters. Du kannst jedoch den Inhalt des body-Elementes mit Ajax holen und dabei Breite und Höhe übergeben. Dann kann das PHP jeweils die richtige Seite aufbauen und zurück liefern.

Das wird hier beschrieben:

https://stackoverflow.com/questions/1810…p-on-first-load