JavaScript Hintergrundanimation per Button deaktivieren

DjangOC · 28. Mai 2017

Hi

hab wiedermal ein Problem mit JS, hab eine Hintergrundanimation auf meiner Webseite, welche zwar hübsch ist, aber laut Umfrage etwa einen Drittel der Besucher beim lesen stören tut. Deswegen möchte ich einen Button platzieren, so dass diese deaktiviert werden kann.

HTML:

<a type="button" value="Klicken um Hintergrundanimation zu beenden" onclick="backgroundbutton()" style="text-decoration: none;">
      <button>
            Hintergrund
      </button>
</a>

Code:

function backgroundbutton() {
      if (document.querySelector('.Welle').style.zIndex = 0){
            document.querySelector('.Welle').style.zIndex = -500;
      }
      else {
            document.querySelector('.Welle').style.zIndex = 0;
      }

Ich dachte mir dass so:
Wenn der Button gedrückt wird, wird überprüft;
wenn die Elemente der Klasse Welle einen z-Index von 0 haben, dann setzte den z-Index Wert jener Klasse auf -500, wenn aber der Z-Index nicht 0 ist, dann setzte ihn auf 0 (also mach es wieder sichtbar).

Kann mir jemand den Code oben korrigieren? Oder geht das einfach gar nicht?

(Und jep, ich hab bewusst die Vanilla schreibweise verwendet (resp. versucht zu verwenden) da ich denke, dass ich dort eher ein Verständnis für die Funktion entwickle.)

Grüsse

Meffen · 28. Mai 2017

Da fehlt ein Gleichzeichen in der Bedienung (zIndex == 0).

Code:

function backgroundbutton() {
      if (document.querySelector('.Welle').style.zIndex == 0){
            document.querySelector('.Welle').style.zIndex = -500;
      }
      else {
            document.querySelector('.Welle').style.zIndex = 0;
      }

Warum nicht den Style auf display none setzten? Dann wird die ".Welle" auf jedenfall nicht angezeigt.

Code:

      if (document.querySelector('.Welle').style.display == 'none'){
            document.querySelector('.Welle').style.display = 'block';
      }
      else {
            document.querySelector('.Welle').style.display = 'none';
      }

Precide · 28. Mai 2017

Wenn sich 1/3 daran stören, dann solltest du die Animation erst gar nicht standardmäßig aktivieren. Das heißt ja auch im Umkehrschluss nicht, dass es den anderen 2/3 gefällt. Ist das denn eine halbwegs professionelle, bzw kommerzielle Website?

character · 28. Mai 2017

Hast du da ein <button> Element in einem <a>? Warum?

DjangOC · 28. Mai 2017

Meffen schrieb:

Da fehlt ein Gleichzeichen in der Bedienung (zIndex == 0).

Code:

function backgroundbutton() {
      if (document.querySelector('.Welle').style.zIndex == 0){
            document.querySelector('.Welle').style.zIndex = -500;
      }
      else {
            document.querySelector('.Welle').style.zIndex = 0;
      }

Warum nicht den Style auf display none setzten? Dann wird die ".Welle" auf jedenfall nicht angezeigt.

Code:

      if (document.querySelector('.Welle').style.display == 'none'){
            document.querySelector('.Welle').style.display = 'block';
      }
      else {
            document.querySelector('.Welle').style.display = 'none';
      }

Danke schonmal, auch an die anderen, aber will leider immer noch nicht funktionieren, resp. zeigt keine Funktion.

@Precide, Umfrage bestand nur aus Ja und nein, und wurde von allen primär betroffenen (da so ne halb geschlossene Website) beantwortet.

@character, weil ich das bisher immer so gemacht habe.

character · 28. Mai 2017

DjangOC schrieb:
@character, weil ich das bisher immer so gemacht habe.

Ok, aber das ist nicht ansatzweise korrektes HTML und kann wer weiß was für Probleme verursachen.

1. button darf nicht in a verschachtelt werden

2. a hat kein Attribut namens "value"

3. "type" darf bei a nicht den Wert "button" haben

Nimm einfach button, wenn du einen Button brauchst. a hat hier nichts verloren. An den Button hängst du die relevanten Attribute, also nur type und ggf. onclick.

Suche

JavaScript Hintergrundanimation per Button deaktivieren

DjangOC

Lt. Commander

Meffen

Cadet 2nd Year

Precide

Admiral

character

Lt. Commander

DjangOC

Lt. Commander

character

Lt. Commander

Ähnliche Themen