Das kann ich Dir nicht sagen, weil ich Deine Grundlage nicht kenne. Nach dem Beispiel-JSON, das Du in #1 gepostet hast, müsste da sogar null rauskommen.
Heißt also: Du verwendest eine andere Datengrundlage, als die hier gezeigte, da wird alles weitere zum Ratespiel...
Wenn es mit value.de schon funktioniert, musst Du es nicht zwingend umbauen, war nur als Vorschlag gemeint. Ich würds wahrscheinlich so machen, evtl. sogar den kompletten select tauschen. Aber das musst Du wirklich selber wissen, Dein Weg ist ja nicht falsch, nur umständlicher, finde ich.
Natürlich ist es auch anders möglich. Nachteil der gezeigten Variante ist, dass ich das für jedes Element innerhalb von test machen muss. Hier haben wir nur eins, da geht das, aber was wenn weitere Container reinkommen?!
Die Alternative sieht so aus, dass Du einfach das target abfragst, bevor Du die eigentliche Aktion ausführst:
document.getElementById( 'test' ).addEventListener( 'mouseover', function(e) {
if ( e.target.getAttribute('id') == 'test' )
console.log( 'whatever' );
});Der Client, respektive JavaScript bekommt von Dir in JSON zurück. Du musst den entsprechenden Wert dort heraus extrahieren.
Für {"user29":null,"de":"HKR->Buchführung prüfen"} wäre das auf JSON Ebene z.B. jsonVar.de.
Du hängst mit .append( new Option(value) ) aber ein neu instanziiertes Objekt in das DOM, was zu String gerendert wird. Da kann nur [object Object] bei rauskommen.
Mach es Dir doch einfacher und bereite die <option>-Felder auf Server Seite vor und sende das an den Client, dann brauchst Du das nur einzuhängen und gut is.
HTML kannst Du überhaupt nicht programmieren, weil das keine Programmier- sondern eine Textauszeichnungssprache ist.
Du kannst aber HTML bei dem Paket verwenden, sofern es einen Webspace beinhaltet, falls Du das meinst.
Stichworte: AJAX, XmlHttpRequest
Beispiele gibt es im Netz ausreichend
Ja, das ist verständlicher. Macht aber so keinen Sinn.
Die Angabe der Führerscheinklasse ist ein CHAR oder VARCHAR, je nachdem. FALSE ist aber ein BOOL. Du kannst der Spalte aber nur einen Datentypen zuweisen.
Alternativ könntest Du NULL anstatt FALSE nehmen, der wäre überall gültig, wo Du es zulässt.
Ich würde die Tabelle(n) allerdings anders aufbauen.
Eine Tabelle mit den Kunden, eine mit Führerscheinen und eine zwecks Mapping. Also drei Tabellen sozusagen.
Jede Tabelle sollte eine AutoIncrement-Spalte als Identifier haben.
Dann kannst Du in der Mapping-Tabelle diese Ids verwenden, um den Kunden die Führerscheine zuzuweisen.
Das ganze hat auch den Vorteil, dass Du bei Kunden, die mehrere Führerscheinklassen besitzen keinen String auseinander pflücken musst.
Bisschen wirre Informationen, um helfen zu können.
Soll das Script eine Tabelle erstellen? Soll nur eine bestehende Tabelle abgefragt werden?
Welche Grundlagen liegen vor ( Datenbank, Tabellen, genaue Aufgabenstellung )?
Als Alternative:
Ich würde auf unnötiges HTML-Gedöns verzichten und eine Form daraus machen, bspw.:
<form name="calc">
<fieldset>
0<input type="range" value="50">100
+<input type="number" value="50">
=<output></output>
</fieldset>
<fieldset>
0<input type="range" value="25">100
+<input type="number" value="25">
=<output></output>
</fieldset>
</form>Das reicht vollkommen, um per JS damit zu arbeiten. Das JS mag auf den ersten Blick etwas komplizierter ausschauen, aber dafür bietet es eine hohe Skalierbarkeit:
var _inputElements = document.querySelectorAll( '[name="calc"] [type="range"], [name="calc"] [type="number"]' );
for ( idx=0; idx<_inputElements.length; idx++ ) {
_inputElements[idx].addEventListener( 'change', function(e) {
_sum = 0;
_fieldSet = this.closest('fieldset');
Array.prototype.slice.call( _fieldSet.querySelectorAll(':scope input') ).forEach( i => { _sum += parseInt(i.value); });
_fieldSet.querySelector( ':scope output' ).value = _sum;
});
}Der Hauptvorteil ist der, dass ich im HTML nun beliebig viele <fieldset> mit gleichem aufbau zufügen kann, das JS braucht nicht angepasst zu werden, es funktioniert bei beliebig vielen, ohne dass ich irgendwelche Parameter übergeben muss o.ä.
Soll aber nur als Vorschlag und weiterer Möglichkeit dienen.
Der Grund ist schlicht und ergreifend, dass JavaScript ( auch wenn es eine Scriptsprache ist ) rein objektorientiert aufgebaut ist. Objekte haben Eigenschaften und Methoden. getElementById() ist eine Methode, des document-Objekt, deshalb muss man das mit angeben, wenn man es nutzen will.
EDIT: Ein Zusatz wäre da noch.
Ich nahm fälschlicher Weise auch mal an, dass querySelector() so wie in #3 gezeigt auf jedes Element angewendet werden kann. Ganz so ist es aber leider nicht, wie ich dann irgendwann feststellen musste. Denn auch bei Anwendung auf ein beliebiges Element, greift querySelector() auf das komplette DOM zu. Erst mit Verwendung des Pseudoselektor :scope erreicht man das gewünschte Verhalten:
var _someElement = document.querySelector( '#someDivElement' );
var _childElement = _someElement.querySelector( ':scope #someChild' );Ganz ehrlich, was ist an ein paar Warnings so dramatisch?
Schau Dir mal w3c.org im Validator an ( siehe Anhang ). Die selbst geben den falschen DOCTYPE an. Was soll das also schon groß aussagen...
Oder schau Dir große Seiten an:
Ich finde es wird viel zu viel Lärm um nichts gemacht, sobald jemand ne Seite vorstellt und ein paar Warnings drin hat.
Ich befürchte, Dir fehlt zu viel Verständnis für JavaScript, kann das sein?
In #1 machst Du folgendes:
var shadow = document.getElementsByClassName('shadow-primary');Das liefert Dir eine NodeList in der Variablen shadow, die Du dann mit einer for-Schleife iterierst, bis dahin richtig:
for (var j = 0; j < shadow.length; j++) {
// ...
}Du hast in jedem Schleifendurchlauf genau ein Element aus der NodeList, in deinem Fall also jedesmal ein HTMLDivElement. Du versuchst aber dieses HTMLDivElement als Funktion aufzurufen:
shadow[j]();Ganz egal, was Du mit dem log.bind() vorhast, es funktioniert so nicht.
Ich bin ehrlich, ich habe noch nicht so ganz verstanden, was Du am Ende erreichen willst, aber dass es so wie Du es machst nicht geht ist erkennbar und ich behaupte auch, dass Dein Ziel einfacher zu erreichen wäre. Wenn Du Lust hast, kannst Du es ja nochmal etwas detaillierter erklären?
Um darauf noch einzugehen:
Kann es sein, dass mein Code zwar korrekt ist aber ich von
Codedocument.querySelectorAllkein Array zurück bekomme?
Wenn dem der Fall ist wie kann ich das Objekt in ein Array umwandeln?
Grundsätzlich bekommst Du von keiner Selektor-Methode ein Array zurück, es wird immer ein Element oder eine NodeList sein.
Solange Du mi einer for-Schleife darüber iterierst, kannst Du mit shadow[i] auf jedes Element zugreifen.
Wenn Du ein Array haben willst, musst Du das slicen:
var _elements = document.querySelector('div');
var _elementsArray = Array.prototype.slice.call(_elements);Dass er die Werte in der Konsole ausgibt, bezweifle ich in keinster Weise. Dein Problem ist, dass Du in Deiner NodeList, die Du von getElementsByClassName erhältst HTMLDivElemente hast und nicht das, was Du eigentlich willst. Ich denke, Du willst CREATE1 und CREATE2 aufrufen, stimmts?
Mal als kurzes Beispiel
Gegeben sei folgende Funktion:
function doSomething() { alert('triggered'); }und Du hast ein DIV, wie dieses:
<div class="foo"><p>doSomething</p></div>Dann hast Du nach einem DOM-Selektor immer das Element ( bei mehreren natürlich eine NodeList mit Elementen ), bspw.:
var _trigger = document.querySelectorAll( '.foo > p' )[0].textContent; // liefert: "doSomething" als STRING!!!Folgendes würde nicht funktionieren und die von Dir bekannte Meldung werfen:
_trigger();Was Du aber machen kannst, wäre folgendes:
window[_trigger]();Das würde funktionieren. Ich bezweifle allerdings, dass das der richtige Weg ist, denn ich sehe keinen Grund, Funktionen auf diese Weise aufzurufen, wenn ich ehrlich bin.
Was funktioniert? Das erschließt sich mir nicht. Was willst Du erreichen?
Wie eine Seite aufgebaut wird, spielt in dem Fall keine Rolle. Wenn Du schon PHP in den Raum wirfst, nehme ich das mal als Beispiel zur Erklärung. PHP wird auf dem Server ausgeführt. Und ganz egal, wie komplex Deine Anwendung wird, PHP sendet am Ende immer das Dokument als reines HTML an den Browser. Ob Bröckchenweise oder im Ganzen sei jetzt mal dahingestellt. Wichtig ist das Verständnis, dass der Browser ein HTML-Dokument erhält, das er rendern muss, nichts weiter. Es spielt also absolut keine Rolle, wie Du eine Website aufbaust.
Das Event DOMContentLoaded ist exakt das Ereignis, das gefeuert wird, wenn der Browser das Dokument komplett geladen hat. Ab dem Punkt ist ein Zugriff auf jedes beliebige Element möglich.
Ok, jetzt klingt das schon plausibler. Wie sieht denn Dein Versuch aus?
Das JavaScript würde ich in eine eigene Datei auslagern und nur über das Script-Tag einbinden:
<script type="text\javascript" src="pfad/zu/deiner/datei.js"></script>Hinweis: Ja, ich weiß, dass das type-Attribut obsolet ist. Bei mir bleibt das aber drin.
In der Datei solltest Du das bereits angesprochene Event verwenden:
document.addEventListener( 'DOMContentLoaded', function(event) {
// ...here code for dom manipulation
});An der Stelle wäre jetzt aber wie gesagt Dein Versuch interessant.
Nimm doch einfach den Unicode. Idealer Weise hat Du alles auf UTF-8, dann kannst Du die sogar mit Copy/Paste einfügen.
Das Vorhaben wäre aber in Frage zu stellen. Wenn aus H2 H3 werden sollen, warum ändert man das nicht direkt in den Dateien?
Gibt es ein JS, jQuery Event das z.B. ausgelöst wird wenn die Seite an sich fertig ist und bereit zu Darstellung ist und ich dann kurzerhand den Code manipulieren kann.
Bevor für so eine Bagatelle zu jQuery gegriffen wird, werfe ich mal DOMContentLoaded in den Raum. Das ist das korrekte JavaScript-Event dafür.
