Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?

felix. · 10. November 2019

Halli hallo,

ich bin gerade dabei einen Image & Text Slider zu schreiben. Allerdings habe ich im Moment das Problem, dass ich nur die Bilder wechseln kann und die Texte nicht.

Deshalb habe ich es jetzt so geändert, dass nichtmehr nur die Bilder gewitchet sondern die ganzen Klassen mit Bild & Text drin.

Hat jemand ne Idee warum es so nicht funktioniert und vlt. eine Lösung?

Liebe Grüße,

Felix!

Code

<div class="slider">
    <img id="slide1" src="images/filmag.jpg" style="width:100%">
    <p>text1</p>
  </div>
  <div class="slider">
    <img src="images/filmag.jpg" style="width:100%">
    <p>text2</p>
  </div>
  <div class="slider">
    <img src="images/filmag.jpg" style="width:100%">
    <p>text3</p>
  </div>
  <div class="slider">
    <img src="images/Kant-Kopf.png" style="width:100%">
    <p>text4</p>
  </div>

Alles anzeigen

Und mein JavaScript-Code:

Code

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
     var y = document.getElementById("slide1");
     y.style.display = "none";
     
    showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("myslider");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

Alles anzeigen

Sempervivum · 10. November 2019

Warum mal wieder das Rad neu erfinden und einen Slider entwickeln? Es gibt genügend, die HTML-Inhalte unterstützen, d. h. kein Problem Bilder mit Texten zu sliden. Meine Favoriten:

https://swiperjs.com

https://owlcarousel2.github.io/OwlCarousel2/

Beide touch-ready und responsiv.

felix. · 10. November 2019

Danke für die Antwort!

Das Problem ist, dass ich das ganze als Informatik Aufgabe aus dem Unterricht habe und ich es somit erklären muss.

Deshalb am besten so simpel wie möglich...

EDIT: Es ist auch besser ganz auf APIs/Erweiterungen zu verzichten.

DER · 10. November 2019

Zuerst einmal suchst du in JS ne Klasse die nicht existiert: var x = document.getElementsByClassName("myslider");

Dabei heißen die Klassen in deinem html: <div class="slider">. Na komm, das muss dir auffallen.

Dann sehe ich nicht wo Du plusDivs(); aufrufst.

Jetzt versuchs mal weiter.

felix. · 10. November 2019

Zitat von DER

Zuerst einmal suchst du in JS ne Klasse die nicht existiert: var x = document.getElementsByClassName("myslider");

Habe ich kurz nach meinem Post gemerkt, aber hier vergessen zu ändern! Also ist geändert.

Zitat von DER

Dann sehe ich nicht wo Du plusDivs(); aufrufst.

Den Teil mit plusDivs(); hatte ich dummerweise auch nicht mit kopiert....

Nun ja, es hat trotzdem nicht funktioniert..., ich habe das ganze jetzt ein wenig anders gemacht. Jetzt funktioniert alles! Für interessierte:

Der HTML-Code:

Code

<div class ="slides">
    <div class="mySlides">
      <img src="images/bild1.jpg" style="width:100%">
      <div class="description">
         Hier könnte ihre Werbung stehen. (Bildunterschrift 1)
      </div>
    </div>

    <div class="mySlides">
        <img src="images/bild2.jpg" style="width:100%">
        <div class="description">
       Hier könnte ihre Werbung stehen. (Bildunterschrift 2)
    </div>
  </div>



   <button id="button1" class="button" onclick="plusDivs(-1)">&#10094;</button>
   <button id="button2" class="button" onclick="plusDivs(1)">&#10095;</button>
</div>

Alles anzeigen

Der Java-Script Code:

Code

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
     var y = document.getElementById("slide1");
     y.style.display = "none";
     
    showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

Alles anzeigen

basti1012 · 10. November 2019

Das ist schön, dass es jetzt geht.

Du könntest aber auch figure und figcaption Elemente nehmen , die sind eigentlich dafür gemacht.

Mein Slider sieht jetzt so aus

https://basti1012.bplaced.net/…rdner=html-seminar&id=404

Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?

Jetzt mitmachen!

Teilen

Tags