window.onload function in code-Element Einkaufswelten

Shopware 5 Programmierung
1

Hallo zusammen,

ich hab ein kleines “Tool” programmiert, mit dem sich Anwender verschiedene Informationen anzeigen lassen können. Entwickelt habe ich das Ganze in einer separaten html-datei auf dem Server. Dort funktioniert sie auch wunderbar. Leider ist das nicht mehr so wenn ich den Code in die Einkaufswelt implementieren will. Ich vermute mal, dass es daran liegt das shopware erst das html lädt und dann das javascript… bzw. die onload funktion einfach zu spät kommt… Hat jemand eine Idee wie das lösen kann?

Hier der Codes…

Javascript:

var stateObject = {
    "Prothetik": {
        "PC": ["Name1"],
        "Eva": ['Name1', 'Name1', 'Name1'] 
    },
    "Orthetik": {
        "PE": ['Name2','Name2','Name2'],
        "PP": ['Name2','Name2','Name2']
    }
}
window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
    for (var state in stateObject) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
    }
    stateSel.onchange = function () {
        countySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          countySel.options[0].text = "Material"
          citySel.options[0].text = "Produkt"
          return; // done   
        }  
        countySel.options[0].text = "Material"
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
        if (countySel.options.length==2) {
          countySel.selectedIndex=1;
          countySel.onchange();
        }  
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          citySel.options[0].text = "Material"
          return; // done   
        }  
        citySel.options[0].text = "Wählen Sie ein Produkt"
        
        var cities = stateObject[stateSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
        if (citySel.options.length==2) {
          citySel.selectedIndex=1;
          citySel.onchange();
        }  
        
    }
}
function myFunction() {
    var x = document.getElementById("citySel");
    var i = x.selectedIndex;
    
    if (x.options[i].text == "Name2") {
        document.getElementById("demo").innerHTML = "hallo";
    } else if (x.options[i].text == "Name1") {
        document.getElementById("demo").innerHTML = "...."
      
    }
function myFunctionMa() {
    var x = document.getElementById("countySel");
    var i = x.selectedIndex;
    
    if (x.options[i].text == "Name2") {
        [.....]
    }

html:

                Anwendungsgebiet
            
        
        
            
                Material
            
        
        
            
                Produkt
            
        
        
            Produkt-Infos
        
        
            Material-Infos
        
    
    
    Bitte wählen Sie ein Material und ein Produkt zur Anzeige der Informationen aus.

 

2

Hallo,

ja, habe ich, schmeiß die onload Funktion außem herum einfach weg. Dein HTML ist bereits vorhanden, sobald dein JavaScript zur Ausführung kommt. Also im Prinzip ist das onload Ereignis schon eingetroffen, bevor es definiert ist.

Zudem gehe ich nicht davon aus, dass das dein eigener Code ist, wahrscheinlich aus irgendeinem Tutorial kopiert oder so. Du solltest Dich mit den Grundlagen von JavaScript beschäftigen und vorallem, warum Dir jQuery in etwa 10 bis 20 Zeilen Code in Deinem Beispiel erspart hätte.

 

 

MFG

 

derwunner

1 „Gefällt mir“