Erstellte id zugreifen, wie?

Noobie_Chan · 27. Februar 2020

Hy,

ich möchte auf ein Element klicken mit .onclick ("das ich mit js erzeugt habe + id vergeben"), Beim klick soll das Element einen shadow bekommen und unterhalb soll dann das bild übernommen und der text usw. ersetzt werden.

zb. klick auf (rot) dummy 2, soll unten das bild angezeigt werden (rot) dummy 2 und Name, text ersetzt werden. Ich habe schon versucht irgentwie über die id zu zugreifen, bekomme immer "null". versuche ich direkt mit getELement('neraxis') bekomme ich auch "null". ALso irgentwie existiert es nicht.

https://codepen.io/Noobie_Chan/pen/MWwbyxV

Aber in der konsole sehe ich es:

Kann aber nicht zugreifen, wo liegt der fehler?

Sempervivum · 27. Februar 2020

Du erzeugst die Elemente erst im onload-Event. Füge ich dort eine Ausgabe ein, funktioniert es:

Code

    window.onload  = function () {
        viewClass[0].classList.add('classActiv');
        clearcontent('bgHeroes');
        createKnights();
        createWarriors();
        createAssassins();
        createArchers();
        createMechanics();
        createWizards();
        createPriests();
        console.log(document.getElementById('neraxis').id)
    }

Alles anzeigen

Ich vermute, Du hast versucht, außerhalb dieser Funktion zuzugreifen, als das Element noch nicht definiert war.

Noobie_Chan · 27. Februar 2020

Ja ich habe versucht außerhalb der function zuzugreifen und mit der ausgabe (log) sah ich das so nicht geht. Ich habe auch versucht in der funktion ein log zu machen bekomme zwar den namen der id raus aber beim weiterarbeiten in der function ist der wert "null".

die window.onload habe ich gemacht das alle listen zusammen ausgegben werden (wenn ich die seite aufrufe). der Rest viewClass[i] zeigen mir dann nur die sparte an die ich möchte (zb. ritter, krieger, priester, etc.)

in der function createKnights() werden die elemente erstellt (hier versuche ich greifen ohne erfolg)

Code

viewClass[1].onclick = function(){
        searchClassRemove();
        clearcontent('bgHeroes');
        createKnights();
        viewClass[1].classList.add('classActiv');        
}

function searchClassRemove () {
        for(let i = 0; i < viewClass.length; i++){
            viewClass[i].classList.remove('classActiv');
        }   
}

function clearcontent(elementID) {
        document.getElementById(elementID).innerHTML = ""; 
}

function createKnights() {
        const htmlFragment = document.createDocumentFragment();
            x = 0;   // X-Axis
            y = 0;   // Y-Axis
        for (let i = 0; i < knightsTotal; i++) {
            const image = document.createElement('section');
            image.classList.add('hero_img', 'class_knights');
            image.id = knightslist[i];
            htmlFragment.appendChild(image);
            image.style.backgroundPosition = x + '% ' + y + '%';
            console.log(image);
            moveAxis(x, y);
                                    // HIER ZUGREIFEN AUF DIE ID?             
        }
        bgHeroes.appendChild(htmlFragment);
}

function moveAxis(axisX, axisY) {
        axisX = axisX + 25;
        if(axisX > 100){
            axisX = 0;
            axisY = axisY + 25;
        }
        x = axisX;
        y = axisY;
}

Alles anzeigen

Wenn ich hier zugreifen möchte ka wie, wenn ich die mit getElementById hole und zuweise funktioniert auch nicht.

Mein Log Konsole (.log(image)):

Code

<section id="neraxis" class="hero_img class_knights" style="background-position: 0% 0%;">
heroes_Container.js:121:21
<section id="loman" class="hero_img class_knights" style="background-position: 25% 0%;">
heroes_Container.js:121:21
<section id="aselica" class="hero_img class_knights" style="background-position: 50% 0%;">
heroes_Container.js:121:21
<section id="clause" class="hero_img class_knights" style="background-position: 75% 0%;">
heroes_Container.js:121:21
<section id="demia" class="hero_img class_knights" style="background-position: 100% 0%;">
heroes_Container.js:121:21
<section id="jane" class="hero_img class_knights" style="background-position: 0% 25%;">
heroes_Container.js:121:21
<section id="morrah" class="hero_img class_knights" style="background-position: 25% 25%;">
heroes_Container.js:121:21
<section id="philop" class="hero_img class_knights" style="background-position: 50% 25%;">
heroes_Container.js:121:21
<section id="ricardo" class="hero_img class_knights" style="background-position: 75% 25%;">
heroes_Container.js:121:21
<section id="sonia" class="hero_img class_knights" style="background-position: 100% 25%;">
heroes_Container.js:121:21
<section id="glenwyn" class="hero_img class_knights" style="background-position: 0% 50%;">
heroes_Container.js:121:21
<section id="dosarta" class="hero_img class_knights" style="background-position: 25% 50%;">
heroes_Container.js:121:21
<section id="neraxis" class="hero_img class_knights" style="background-position: 0% 0%;">
heroes_Container.js:121:21
<section id="loman" class="hero_img class_knights" style="background-position: 25% 0%;">
heroes_Container.js:121:21
<section id="aselica" class="hero_img class_knights" style="background-position: 50% 0%;">
heroes_Container.js:121:21
<section id="clause" class="hero_img class_knights" style="background-position: 75% 0%;">
heroes_Container.js:121:21
<section id="demia" class="hero_img class_knights" style="background-position: 100% 0%;">

Alles anzeigen

kann man die Id nur so holen: getElementById('neraxis') oder kann ich auch so: getElementById(knightlist[i])?

Sempervivum · 27. Februar 2020

Bei mit funktioniert der Zugriff auch in der Funktion createKnights:

Code

    function createKnights() {

        const htmlFragment = document.createDocumentFragment();
            x = 0;   // X-Axis
            y = 0;   // Y-Axis

        for (let i = 0; i < knightsTotal; i++) {
            const image = document.createElement('section');
            image.classList.add('hero_img', 'class_knights');
            image.id = knightslist[i];
            htmlFragment.appendChild(image);
            image.style.backgroundPosition = x + '% ' + y + '%';
            image.addEventListener('click', e => {
                console.log(image.id + ' clicked')
            });
            moveAxis(x, y);          
        }
        bgHeroes.appendChild(htmlFragment);
    }

Alles anzeigen

Zitat

kann man die Id nur so holen: getElementById('neraxis') oder kann ich auch so: getElementById(knightlist[i])?

Selbstverständlich sollte das zweite auch funktionieren.

Noobie_Chan · 27. Februar 2020

danke für die hilfe, werd es mir erst morgen anschauen können, arbeit ruf...

hmm... dann muss ich mich wohl irgentwo vertippt oder so haben weil die 2te möglichkeit auch nicht geklappt hat.

Noobie_Chan · 28. Februar 2020

Habe mir das jetzt genauer angeschaut, funktioniert sehr gut. Nur die schreibweise ist für mich fremd. Jetzt kann ich wieder weiter arbeiten. Danke!!!

Sempervivum · 28. Februar 2020

Gern geschehen!

Vermutlich meinst Du die Pfeilfunktion und bist die Schreibweise mit function gewohnt.

Auch für die for-Schleife gibt es eine neuere, kompaktere Version:

https://wiki.selfhtml.org/wiki…ipt/Objekte/Array/forEach

Erstellte id zugreifen, wie?

Jetzt mitmachen!

Teilen