Hintergrund mit Knopfdruck wechseln

1. offizieller Beitrag

    Guten Tag,
    ich bin noch ein ziemlicher Anfänger versuche aber momentan bei meiner Website einen Button zu machen, welcher beim Klicken das Hintergrund zwischen 2 wechselt.
    Den Button hab ich schon erstellt:

    HTML
    <div class="w3-display-bottommiddle w3-padding-large w3-animate-opacity">
        <button class="name" onclick="bgChange()"><p class="w3-text-white w3-underlined">Hintergrund wechseln</p></button>


    Dieser funktioniert auch schon, aber die Funktion "bgChange()" fehlt mir noch.

    Meinen Hintergrund der Website hab ich so in meiner CSS:

    HTML
    .bgimg {
    background-image: url('img/background.jpg');
    min-height: 100%;
    background-position: center;
    background-size: cover;       
}

    Und ich weiß nicht wie ich es nun machen soll, dass sich durch "bgChange()" der Attribut "background-image" von "url('img/background.jpg');" zu "url('img/background2.jpg');" ändern soll und wieder zurück.
    Wie kann ich das mit Javascript lösen?

    Danke im Vorraus.

    • Offizieller Beitrag

    Das onclick-Attribut kannst Du entfernen, das lässt sich besser über einen Listener handeln:

    Code
    document.querySelector( 'button.name' ).addEventListener(
        'click',
        function(e) {
            e.preventDefault();
            _bgElement = document.querySelector('body'); // oder welches Element auch immer
            _bgElement.className = (_bgElement.className == 'bgimg')? 'bgimg2': 'bgimg';
        }
    );


    Dann definierst Du eine zweite Klasse:

    Code
    .bgimg, .bgimg2 {
    min-height: 100%;
    background-position: center;
    background-size: cover;       
}


.bgimg { background-image: url('img/background.jpg'); }
.bgimg2 { background-image: url('img/background2.jpg'); }


    ungeteset, aber eine von vielen Möglichkeiten, wie es funktionieren sollte.

    Zitat von Arne Drews

    Das onclick-Attribut kannst Du entfernen, das lässt sich besser über einen Listener handeln:

    Code
    document.querySelector( 'button.name' ).addEventListener(
        'click',
        function(e) {
            e.preventDefault();
            _bgElement = document.querySelector('body'); // oder welches Element auch immer
            _bgElement.className = (_bgElement.className == 'bgimg')? 'bgimg2': 'bgimg';
        }
    );


    Dann definierst Du eine zweite Klasse:

    Code
    .bgimg, .bgimg2 {
    min-height: 100%;
    background-position: center;
    background-size: cover;       
}


.bgimg { background-image: url('img/background.jpg'); }
.bgimg2 { background-image: url('img/background2.jpg'); }


    ungeteset, aber eine von vielen Möglichkeiten, wie es funktionieren sollte.


    Hey,
    es funktioniert leider nicht so richtig wie es soll.
    Wenn ich das 1. mal auf den Button klicke wird mein ganzer Text schwarz, wenn ich ein 2. mal draufklicke wechselt der Hintergrund zu "background2.jpg" und dann egal wie oft ich drücke passiert nichtsmehr.
    Was ich aber möchte ist dass man zwischen den beiden Hintergründen wechseln kann.