Beiträge von Noobie_Chan

Noobie_Chan · 23. August 2020

Hy,

ich habe 2 verschiedene schreibweisen, machen aber das gleiche. Gibt es da einen unterschied warum man eher die erste bzw. zweite Schreibweise nimmt? Ist das nicht egal? Ich erkenne hier nur das eine gespeichert wird und die andere nicht und die Schreibweise 1 muss ich vor dem Haupteil schreiben.

Bedanke mich im vorraus für eure hilfe.

Hauptteil:

Code

document.querySelectorAll(".subNavImage").forEach(function (elem) {
    elem.addEventListener("click", btnClick);
  });

Schreibweise 1:

Code

let btnClick = function () {
    let elem = this.id;
    ...
  };

Schreibweise 2:

Code

function btnClick() {
    let elem = this.id;
    ...
  };

Noobie_Chan · 13. April 2020

Habe jetzt einmal geschafft die Rohform, sieht glaub ich gut aus.

html:

Code

<div id="valueStats"></div>

js:

Code

const categoryBox = {
    mainBox: { hp: 'MAX TP', atk: 'Ang', p_Def: 'K. Vert', m_Def: 'M. Vert' },
    offensiveBox: { crit: 'Krit', crit_Dmg: 'Krit Schaden', penetration: 'Durchdringung', acc: 'Präz' },
    defensiveBox: { p_Dodge: 'K. Ausweichen', m_Dodge: 'M. Ausweichen', p_Block: 'K. Block', m_Block: 'M. Block', p_Block_Def: 'K. Block Vert.', m_Block_Def: 'M. Block Vert.', p_Tough: 'K. Stärkung', m_Tough: 'M. Stärkung', p_Crit_Resist: 'K. Krit WDST', m_Crit_Resist: 'M. Krit WDST' },
    subBlockBox: { cc_Resist: 'CC-WDST', cc_Acc: 'CC-Präz', lifesteal: 'Lebensraub', atk_Speed: 'Ang Geschw.', mp_Recover_Atk: 'MP Erholung/Ang', mp_Recover_Dmg: 'MP Erholung/Schaden', mp_Recover_Sec: 'MP Erholung/Sekunde' },
  };



  window.onload = function () {
    let container = document.getElementById('valueStats');
    htmlFragment = document.createDocumentFragment();
    console.log(container);

    // create category & add id, class
    for (let property in categoryBox) {
      let newDiv = document.createElement('div');
      if (categoryBox.hasOwnProperty(property)) {
        newDiv.id = property;
        newDiv.classList.add('min-row');
        htmlFragment.appendChild(newDiv);
        createBlock1(newDiv, property);
        createBlock2(newDiv);
        createBlock3(newDiv);
        console.log(newDiv);
      }
    }

    // column 1 (left)
    function createBlock1(newDiv, property) {
      let newDiv2 = document.createElement('div');
      newDiv2.classList.add('min-col-1', 'start');
      newDiv.appendChild(newDiv2);
      createUl(newDiv2, property);
      console.log(newDiv2);
    }

    // column 2 (mid)
    function createBlock2(newDiv) {
      let newDiv3 = document.createElement('div');
      if (newDiv.id === 'mainBox') { newDiv3.classList.add('min-col-2'); }
      newDiv3.classList.add('min-col-1');
      newDiv.appendChild(newDiv3);
      createUl(newDiv3);
      console.log(newDiv3);
    }

    // column 3 (right)
    function createBlock3(newDiv) {
      if (newDiv.id !== 'mainBox') {
        let newDiv4 = document.createElement('div');
        newDiv4.classList.add('min-col-1');
        newDiv.appendChild(newDiv4);
        createUl(newDiv4);
        console.log(newDiv4);
      }
    }

    // Create Ul
    function createUl (div, property) {
      let newUl = document.createElement('ul');
      div.appendChild(newUl);
      createLi(newUl, property);
      console.log(newUl);
    }

    // Create Li points
    function createLi (ul, id) {
      let obj = categoryBox[id];
      console.log(obj);
      
      for (let property in obj) {
        let newLi = document.createElement('li');
        newLi.innerText = obj[property];
        ul.appendChild(newLi);

        console.log(newLi);
        console.log(newLi.innerText); 
      }


    }
    container.appendChild(htmlFragment);
    console.log(htmlFragment);
  }

Alles anzeigen

Habe erst etwas spät gemerkt das ich ja noch span drinen habe :$. Werde jetzt noch den code besser formatieren. Und dann weiter mit dem span anfangen.

Kurzes feedback zum code wäre super. Was gut gemacht ist und was schlecht gemacht ist (Bin noch Anfänger!) Verbesserungen vorschläge, tipps, etc. erwünscht. (damit ich mir neues aneignen kann)

Mfg.

Noobie_Chan · 12. April 2020

Funktioniert "glaub ich" genau so wie es soll, kann es nicht richtig überprüfen, beim log läufts verkehr die ausgabe. Nach dem ich bis zum element <li> gekommen bin, sehe ich ob ich alles richig gemacht habe.

Ich denke das ich es in etwas verstanden habe die schreibweise und mit appendChild(). Wenn ich fertig bin werde ich meinen Code hier posten.

thx

Noobie_Chan · 12. April 2020

Ich möchte schön mehrere elemente erzeugen, deswegen mit DocumentFragment. Problem ist wenn ich schon ein div erzeuge, möchte ich ein div ins das erste div erzeugen. Muss ich es mir mit getElementById(....) holen? Oder kann ich in das erzeugte div ein weiteres div erzeugen? Wenn ja wie? Aussehen sollte es so:

Html:

Code

<div id="valueStats">
    <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

    </div>

    <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        <div>

        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        <div>
    </div>
        
    <div>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
        
    <div>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>

</div>

Alles anzeigen

<div id="valueStatus"></div> steht schon im Html, mit createElement füge ich 4x div hinzu +class, id. Und zu jeden div möchte ich weitere kind elemente <div> erzeugen. Wie kann ich sie hinzufügen? Kann ich sie hinzufügen wenn er das erste div erzeugt (+2 kindelemente), usw.bis zum <li>...</li>? (dadurch erzeuge ich mehrere elemente, deshalbt createDocumentFragment()). Ich weis halt nicht wie ich bei einem erzeugten div ein weiter div (kindelement) hinzufügen kann. Bin da selbst ziemlich confused.

Noobie_Chan · 12. April 2020

Hy

Habe folgendes problem, möchte einen Teil in js erstellen lassen (denke wäre sinvoll) Nur kein plan wie man ein erstelltest element weitere element darunter hinzufügt. div Id=" valueStats" steht im html code bereit.

Hier der Html code:

Code

<div id="valueStats">

    <div class="min-row" id="mainBlock">

        <div class="min-col-1 start">
            <ul>
                <li>MAX TP</li>
                <li>ANG</li>
                <li>K.VERT</li>
                <li>M.VERT</li>
            </ul>   
        </div>

        <div class="min-col-2">                                        
            <ul>
                <li><span>0</span> ( <span id="Hp"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Atk"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Def"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Def"></span> + <span>0</span> )</li>
            </ul>                                        
        </div> 

    </div>
                            
    <div class="min-row">                           
        <div class="min-col-1 start">   
            <ul>
                <li>ANG Geschw.</li>
                <li>Krit</li>
                <li>Krit. Schaden</li>
                <li>Durchdringung</li>
                <li>Lebensraub</li>
                <li>MP Erholung/Angriff</li>
                <li>MP Erholung/Schaden</li>
                <li>MP Erholung/Sek</li>
                <li>PRÄZ</li>
            </ul>   
        </div>
                                
        <div class="min-col-1"> 
            <ul>
                <li><span>0</span> ( <span id="Atk_Speed"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Crit"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Crit_Dmg"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Penetration"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Mp_Recovery_Atk"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="Acc"></span> + <span>0</span> )</li>
            </ul>  
        </div>
                                
        <div class="min-col-1">  
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>  
        </div>                         
    </div>
                            
    <div class="min-row">
        <div class="min-col-1 start">
            <ul>
                <li>K. Block</li>
                <li>K. Block VERT.</li>
                <li>K. Ausw.</li>
                <li>K. Stärkung</li>
                <li>K. Krit Resistance</li>
            </ul>
        </div>
                                
        <div class="min-col-1">
            <ul>
                <li><span>0</span> ( <span id="P_Block"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Block_Def"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Dodge"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="P_Tough"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
            </ul>
        </div>
                                
        <div class="min-col-1">
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>
        </div>                        
    </div>
                            
    <div class="min-row">
                                
        <div class="min-col-1 start">
            <ul>
                <li>M. Block</li>
                <li>M. Block VERT.</li>
                <li>M. Ausw.</li>
                <li>M. Stärkung</li>
                <li>M. Krit Resistance</li>
            </ul>
        </div>

        <div class="min-col-1">
            <ul>
                <li><span>0</span> ( <span id="M_Block"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Block_Def"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Dodge"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id="M_Tough"></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
            </ul>                           
        </div>
                                
        <div class="min-col-1">
                                    
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>
        </div>                           
    </div>
                            
    <div class="min-row">
                                
        <div class="min-col-1 start">
            <ul>
                <li>Block</li>
                <li>VERT</li>
                <li>Ausw.</li>
                <li>Krit Resistance</li>
                <li>CC Resistenz</li>
                <li>Schwächung PRÄZ</li>
            </ul>
        </div>

        <div class="min-col-1">
                                    
            <ul>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span id="Cc_Resist"></span> ( <span id=""></span> + <span>0</span> )</li>
                <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li>
            </ul>
        </div>
                                
        <div class="min-col-1">
            <ul>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
                <li><span>0</span>%</li>
            </ul>
        </div>
    </div>
</div>

Alles anzeigen

Hier mein js:

Code

const categoryBox = {
    mainBox: { hp: 'MAX TP', atk: 'Ang', p_Def:'K. Def', m_Def: 'M. Def'},
    offensiveBox: { crit: 'Krit', crit_Dmg: 'Krit Schaden', penetration: 'Durchdringung', acc: 'Präz'},
    defensiveBox: { p_Dodge: 'K. Ausweichen', m_Dodge: 'M. Ausweichen', p_Block: 'K. Block', m_Block: 'M. Block', p_Block_Def: 'K. Block Vert.', m_Block_Def: 'M. Block Vert.', p_Tough: 'K. Stärkung', m_Tough: 'M. Stärkung', p_Crit_Resist: 'K. Krit WDST', m_Crit_Resist: 'M. Krit WDST'},
    subBlockBox: { cc_Resist: 'CC-WDST', cc_Acc: 'CC-Präz',  lifesteal: 'Lebensraub', atk_Speed: 'Ang Geschw.', mp_Recover_Atk: 'MP Erholung/Ang', mp_Recover_Dmg: 'MP Erholung/Schaden', mp_Recover_Sec: 'MP Erholung/Sekunde'},
  };

window.onload = function () {
    let container = document.getElementById('valueStats');
    htmlFragment = document.createDocumentFragment();
    console.log(container);


    for(let property in categoryBox){
      createCategory(property);
    }
    console.log(htmlFragment);
  }

  // create category & add id, class
  function createCategory(elem) {
    let newDiv = document.createElement('div');
    if(categoryBox.hasOwnProperty(elem)) {
      newDiv.id = elem;
      newDiv.classList.add('min-row');
    }
    console.log(categoryBox[elem]);


    htmlFragment.appendChild(newDiv);
    console.log(newDiv);
  }

Alles anzeigen

Geht das so in die richtige richtung oder lauf ich da gegen was an?

(Internet spuckt nix aus, ausßer createElement(), creatDocumentFragment(), )

Bitte um tipps.

Mfg.

PS. Frohe Ostern!

Noobie_Chan · 24. März 2020

danke für deine hilfe, es funktioniert genau so wie es soll.

Meine erste idee war eh so:

Code

const nameValue = {
    knightsValue: {
      Hp: 1520472,
      Atk: 17632,
      P_Def: 7832,
      M_Def: 6096,
      Mp_Recovery_Atk: 210,
      Crit: 150,
      Acc: 100,
      Cc_Resist: 150,
      Penetration: 150,
      P_Dodge: 250,
      P_Dodge: 250,
      Atk_Speed: 1000
    },
};

Alles anzeigen

hatte probleme mit der schreibweise wie man es schreibt. wusste nicht das ich es einfach so machen kann.

das ist nur neu:

Code

hasOwnProperty(property)  // woher kommt das (property)?

muss ich mir mal genau anschauen, ist ein vergleich ob es gleich ist? (true, false)?

warum verwendest du hier var? (hab "gelernt" let zu benutzen, var in ausnahmefällen, "größerer scope-breich" trifft das hier zu?)

Noobie_Chan · 24. März 2020

Hy,

habe folgendes problem, wenn ich auf einen kreis drücke (2-8, 1 ist noch nicht fertig[summe2-8]) soll er mir unten kästchen anzeigen (was er auch tut) und weiter unten soll er mit werte übernehmen (was er auch tut aber immer "letzte" nimmt (werte vom kreis 8). Ich finde nicht heraus warum er immer den letzten nimmt.

Bitte um hilfe!

https://codepen.io/Noobie_Chan/pen/qBdjwWQ?editors=1010

Noobie_Chan · 23. März 2020

Jetzt kann ich weiter arbeitne, hab es endlich verstanden wie was wann. Mein problem ist das ich nicht sehe was er gerade für ein wert hat und daher kann ich nicht damit richtig umgehen! Log mir alles immer aus damit ich sehe was es gerade ist =)

DANKE!

Best Supporter, ever!

Ergebnis: https://codepen.io/Noobie_Chan/pen/bGdxqzr?editors=1010

Noobie_Chan · 21. März 2020

hmm... Bildlich stelle ich es mir so vor wenn ich Button 1 drücke:

querySelectorAll('.btn') würde so aussehen?: ("Array")

Code

... .... = [
   <div class="container btn">btn 1</div>,
  <div class="container btn">btn 2</div>,
  <div class="container btn">btn 3</div>,
  <div class="container btn">btn 4</div>,
  <div class="container btn">btn 5</div>,
];

das wäre "gespeichert" & mit this greif ich auf:

Code

<div class="container btn">btn 1</div>

und mit .innerText greife ich dann auf:

Code

<div class="container btn">btn 1</div>,

verstehe ich das mal so richtig?

Noobie_Chan · 21. März 2020

Hab mir das mehre male versucht anzugucken aber irgentwie habe ich ein hänger. Mit querySelectorAll(...) kann ich mir mehrer "element, klassen, etc." sammeln/suchen. Es verhaltet sich/ist wie ein array? Ich versuche auf das zuzugreifen aber irgentwie greif ich ins leere. Ich sehe nicht was ich da habe. Die forEach habe ich verstanden. "forEach( elem, index)" https://codepen.io/Noobie_Chan/pen/qBdjwWQ?editors=1010 da habe ich ein wenig herum probiert, versucht das output mir ausgibt welcher btn ich gedrückt habe.

Noobie_Chan · 19. März 2020

Hab mir das angesehen, problem:

document.querySelectorAll(.btn).forEach(function(item, idx)

da stört ihm beim .btn der punkt. SyntaxError

Noobie_Chan · 19. März 2020

Wäre so der grundaufbau richtig?

JS:

Code

var btnClick = function(){
  const output = document.getElementById('ausgabe');

  /*hier die forEach-schleife?*/
  
}

document.querySelectorAll(.btn).onclick = btnClick;

https://codepen.io/Noobie_Chan/pen/qBdjwWQ?editors=1010

Noobie_Chan · 19. März 2020

Hy,

ich versuche gerade meinen kompletten code schlanker zu machen. Mein problem ist das ich mehrere 'clicks' habe die eigentlich das selbe machen nur andere werte haben. Nach einigen recherche habe ich etwas gefunden mit querySelectorAll(); denke das es ein falscher weg ist. Und durchs experimentieren habe ich sowas rausgefunden:

HTML:

Code

<div class="bg">
  <div class="container" id="btn1">btn 1</div>
  <div class="container" id="btn2">btn 2</div>
  <div class="container" id="btn3">btn 3</div>
  <div class="container" id="btn4">btn 4</div>
  <div class="container" id="btn5">btn 5</div>
  <div class="container" id="ausgabe">output</div>
  
</div>

CSS:

Code

.bg {
  background-color: lightgreen;
  height: 8rem;
  padding-top: 4rem;
  padding-left: 3rem;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  
}
.container {
  background-color: lightgrey;
  display: inline-block;
  height: 2rem;
  width: 100px;
  border: 1px solid grey;
  padding-top: .8rem;
  margin-top: .5rem;
  margin-left: .3rem;
  margin-right: .3rem;
  text-align: center;
}

.activ {
  background-color: lightblue;
  border: 1px solid blue;
}

Alles anzeigen

JS:

Code

var btnClick = function(){
  const choose = this.id;
  const output = document.getElementById('ausgabe');
  
  output.innerText = 'Klick: ' + choose;
  
}

document.getElementById('btn1').onclick = btnClick;
document.getElementById('btn2').onclick = btnClick;
document.getElementById('btn3').onclick = btnClick;
document.getElementById('btn4').onclick = btnClick;
document.getElementById('btn5').onclick = btnClick;

Alles anzeigen

Bisher habe ich nix gefunden wie ich es am besten machen könnte. Als ergebnis bekomme ich hier die ID ausgespuckt. Kann ich mir da noch etwas anderes ausspucken lassen? Bzw. Wie kann die die ID weiter verwenden für eine function? zb. ausgabe soll ID ausspucken mit innerText und soll eingefärbt werden (zb. btn1 = blau, btn2 = grün, ...) Ich weis nicht wie ich mit der information umgehen soll.

https://codepen.io/Noobie_Chan/pen/qBdjwWQ?editors=1010

Ps: this ist mir noch etwas fremd, habe das noch nicht so ganz verstanden. Hat wer ein kleine bsp. zur verwendung?

Bin für jede hilfe dankbar! =)

Noobie_Chan · 6. März 2020

Danke, die schreibweise habe ich schon in einem tut (udemy) "gelernt". Wäre nie auf die idee gekommen so zu machen!

Noobie_Chan · 6. März 2020

Hy

folgendes problem, ich möchte eine variable zusammensetzten lassen damit ich sie mehrfach benutzen kann.

Hier der code:

Code

const knightsDescription = [
        'neraxis',
        'loman',
        'aselica',
        'clause',
        'demia',
        'jane',
        'morrah',
        'philop',
        'ricardo',
        'sonia',
        'glenwyn',
        'dosarta',
    ];

const warriorsDescription = [
        'x',
        'y',
        'z',
        'w',
        'v',
    ];

image.addEventListener('click', e => {
    const description = document.getElementById('description');      
    const test = knightsDescription[i];                             // funktioniert perfekt aber nur für knights!
    description.innerText = test;
    console.log(test);                                              // Gewünschte ausgabe!
});

Alles anzeigen

ist es möglcih das zu *zerlegen*: knightsDescription => knights(teil1) / Description(teil2)

teil1 = ist gespeichert in einer variable (zb. name)

teil2 = 'Description' (string?)

Zitat

const test = name + 'Description' + '[' + i + ']'; / log = knightsDescription[0]

Und es dann verwenden für das zugreifen?

Hoffe das es verständlich ist.

Noobie_Chan · 5. März 2020

Danke,

es funktioniert genau so wie es soll. Ka was querySelector ist, muss ich mir mal durchlesen.

Ps. Bei mir treten überhaupt keine Probleme auf. Ich benutze: Brackets & Visual studio code

Noobie_Chan · 5. März 2020

Genau!

ps. Wollte bei den bilder nicht extra noch andere anfertigen.

Noobie_Chan · 5. März 2020

hy,

danke für deine schnelle antwort.

Danke das du mir das umgeschrieben hast mit dem 1x laden (wollte bei mir nicht, deswegen alle bilder seperat, die bilder die hier verwendet werden sind nicht die originalen, *ersatzbilder, format usw. sind 1zu1). Habe den code übernommen und meine werte beibehalten.

Zum eigentlichen problem:

______________________________________________________________________________________

Beim erstmaligen aufrufen der seite macht sie es richtig!

Drücke ich auf einen Kreis ladet er mir die gewünschten Bilder.

Dummy 1 wird angezeigt - richtig! (immer Dummy 1 Anzeigen, beim kreis drücken)

Drücke ich Dummy 5 zeigt er mir Dummy 5 - richtig!

Drücke ich jetzt einen Kreis, ladet er mir die gewünschten Bilder,

Dummy 5 wird angezeigt - flasch! (Dummy 1 soll angezeigt werden)

________________________________________________________________________________________

Hoffe das es jetzt verständlicher erklärt worden ist.

PS. ich weis das ich viel code drinen stehen habe, ich reduziere den code dann später, so tue ich mir am anfang leichter und lerne effizienter code zu schreiben.

Noobie_Chan · 5. März 2020

hy,

habe folgendes problem:

Wenn ich beim menü (kreis "button"), wähle, soll immer Dummy 1 ausgewählt werden. So funktioniert es, aber wenn ich dummy 3 oder 4 anklicke und dann einen Kreis("button") wähle, dann übernimmt er die gleiche position. Möchte aber das er Dummy 1 wählt. Muss was mit der image.style.backgroundposition zu tun haben, ka woran ich nicht denke. Bitte um hilfe.

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

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!!!

Beiträge von Noobie_Chan

Gibt es hier einen "großen" unterschied, der wichtig ist?

createElement() - Html Teil mit js erstellen, wie?

createElement() - Html Teil mit js erstellen, wie?

createElement() - Html Teil mit js erstellen, wie?

createElement() - Html Teil mit js erstellen, wie?

Ladet immer letzte werte,warum?

Ladet immer letzte werte,warum?

Mehrere btn, weniger code, tipps?

Mehrere btn, weniger code, tipps?

Mehrere btn, weniger code, tipps?

Mehrere btn, weniger code, tipps?

Mehrere btn, weniger code, tipps?

Mehrere btn, weniger code, tipps?

Variable zusammen setzen, möglich?

Variable zusammen setzen, möglich?

Menü wahl, soll immer erstes bild gewählt werden, wie?

Menü wahl, soll immer erstes bild gewählt werden, wie?

Menü wahl, soll immer erstes bild gewählt werden, wie?

Menü wahl, soll immer erstes bild gewählt werden, wie?

Erstellte id zugreifen, wie?