Hintegrundfarbe eines div per Javascript wechseln

sv_photo · 14.08.2018

Hallo, ich möchte, dass der User meiner Website bei bestimmten div containern per Mausklck die Hintergrundfabre des beteffenden dic Containers ändern kann. Soweit bekomme ich den Farbwechsel auch hin nur leider nicht auf einen bestimmten Container, sondern für den gesamten body. Kann mir vielleicht jemand helfen und sagen was ich an meinem Code ändern muss um die Änderungen auf den div mit der class "demo" zu beschränken.

Danke für Eure Hilfe:

Code:

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>
  <style type="text/css">
    body {
      background-color: rgb(225,225,225);
    }
  </style>
  <script type="text/javascript">
    var currColor;
    function changeColor(colorName) {
      document.body.style.backgroundColor = colorName;
      currColor = colorName;
    }
    function previewColor(colorName) {
      currColor = document.body.style.backgroundColor;
      document.body.style.backgroundColor = colorName;
    }
    function oldColor() {
       document.body.style.backgroundColor = currColor;
    }
  </script>
  </head>
  <div class="row demo">
      <input type="image" src="buttons/01_red.png" width="50" name="red" value="rot" onClick="changeColor('#ff0000');" onMouseOver="previewColor('#ff0000');" onMouseOut="oldColor();">
      <input type="image" src="buttons/02_orange.png" width="50" name="red" value="rot" onClick="changeColor('#f15a24');" onMouseOver="previewColor('#f15a24');" onMouseOut="oldColor();">
      <input type="image" src="buttons/03_orange.png" width="50" name="red" value="rot" onClick="changeColor('#f7931e');" onMouseOver="previewColor('#f7931e');" onMouseOut="oldColor();">
      <input type="image" src="buttons/04_yellow.png" width="50" name="red" value="rot" onClick="changeColor('#fcee21');"
  </div>
</html>

owieortho · 14.08.2018

Du sprichst ja auch den body in Deiner Funktion an

ersetze mal mit getElementsByTagName/ClassName/Id
Hier gibt es Beispiele

O.

Gelöschtes Mitglied 633957 · 14.08.2018

Falls einen die Liste mit Eigenschaften und Methoden erschreckt, ist ein direktes Beispiel vielleicht hilfreich.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #color1, #color2 {
        width: 500px;
        min-height: 150px;
      }
      #color1 {
        background-color: green;
      }
      #color2 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>

    <div id="color1">
      ICH BIN EIN GR&Uuml;NER CONTAINER!
      <br><br>
      <button type="button" onClick="changeColor('orange', 'color2');">gelb zu orange</button>
    </div>

    <div id="color2">
      ICH BIN EIN GELBER CONTAINER!
      <br><br>
      <button type="button" onClick="changeColor('red', 'color1');">gr&uuml;n zu rot</button>
    </div>

  </body>
      <script>
      function changeColor(color, container) {
        document.getElementById(container).style.backgroundColor = color;
      }
    </script>
</html>

sv_photo · 15.08.2018

Danke für Eure Antworten,

die Lösung von Tynick sieht sehr gut aus... Kanst Du mir vielleicht sagen, was ich an meinem CODE ändenr muss das nur die classe oder ggf. die id "demo" angesprochen wird?

Code:

body {
      background-color: rgb(225,225,225);

Wenn ich nur "body" ersetzte funktioniert es leider nicht. Steck in der Javascript Materie nicht so tief drin...

Kann ich die classe oder id in diesem string ansprechen?:

Code:

document.body.style.backgroundColor

Danke

buerzel · 15.08.2018

Hier für deinen Code z.B.:

Code:

document.getElementById("colorDIV").style.backgroundColor
.
.
<div id="colorDIV" class="row demo">

EDIT: Code korrigiert.

sv_photo · 16.08.2018

Danke buerzel, ich raffs aber leider nicht... Ich werde mir wohl ersteinmal ein paar Grundlagen zum Javascript zulegen und dann durch starten...

Danke für Eure Hilfe!

buerzel · 16.08.2018

Was ist da nicht zu raffen?
Im style tag bleibt body stehen. Nur In den Funktionen wird er durch getElementById ersetzt (und zwar alle body).
Die id (von mir colorDIV genannt) ist ein beliebiger, von dir vergebener, Name.

EDIT: Funktionsname korrigiert.

Myhar · 16.08.2018

buerzel schrieb:
Was ist da nicht zu raffen?
getElementsByID

Vielleicht rafft er es nicht weil es bei ihm nicht funktioniert. Schließlich bringst du nun zum zweiten Mal eine falsche, in JS nichtexistente Funktion.
Die Funktionen querySelector und querySelectorAll sind für so ein Problem auch hilfreich. Für so ein simples Beispiel wohl nicht zwingend notwendig, aber spätestens wenn es erweitert werden soll gut zu gebrauchen.

Ansonsten kann ich @sv_photo nur zustimmen, sich Grundlagen anzueignen ist hier wirklich anzuraten.
Dann kann man für dieses Problem auch eine saubere Lösung ohne onclick="" entwickeln.

buerzel · 16.08.2018

Myhar schrieb:
Schließlich bringst du nun zum zweiten Mal eine falsche, in JS nichtexistente Funktion.

Oh, sorry - klar, muss natürlich getElementById heißen. Liegt auch daran, dass ich nicht mehr so in der Materie vertieft bin. Hatte das vorgestern ausprobiert und es lief.

PS: Aber: Ist halt wie dazumal in der Schule. „Abschreiben” war noch nie ein guter Ratgeber.

Gelöschtes Mitglied 633957 · 16.08.2018

sv_photo schrieb:
das nur die classe oder ggf. die id "demo" angesprochen wird

Hier einmal Schritt für Schritt an Deinem geposteten Code. (Das der letzte <input> Tag nicht geschlossen ist, darüber sehen wir jetzt hinweg!)

Eine ID mit dem Namen "demo" gibt es in Deinem Code bis jetzt noch nicht. Da es aber bereits eine "demo" Klasse, wohl für CSS Anweisungen gibt, denken wir uns schnell eine neue ID aus um nicht durcheinander zu kommen. Ich denke, wir nehmen die von @buerzel vorgeschlagene ID "colorDIV". (Es gibt andere Wege Deinen Container zu identifizieren, doch in diesem Beispiel beiben wir bei einer ID, was auch nicht verkehrt ist.)

Um Javascript beizubringen welcher Container manipuliert werden soll, geben wir Deinem DIV Element jetzt die ID. Dazu änderst Du Deine Zeile 25, von:

Code:

<div class="row demo">

in:

Code:

<div id="colorDIV" class="row demo">

Mit diesem super Identifikationsmerkmal müssen wir nur noch dem Skript erzählen, dass es aufhören soll den Seitenhintergrund zu ändern und dafür lieber das Element mit unserer tollen, neuen ID nehmen soll.
D.h., raus mit dem Wort "body" und dafür rein mit einer JS Funktion namens "getElementById()". Und da wir die ID ja bereits kennen, können wir sie auch gleich mit angeben. Also:

In den Zeilen 13, 17, 18 und 21 löschen wir das Wort "body" und setzen dafür ein:

Code:

getElementById('colorDIV')

Dann sehen die Zeilen in etwa so aus:

Code:

document.getElementById('colorDIV').style.backgroundColor = colorName;

(In diesem Fall wäre es übrigens egal ob einzelne oder doppelte Anzührungszeichen verwendet werden.)

Nun sollte alles das was sich vorher farblich im Seitenhintergrund abgespielt hat, sich auf das DIV Element mit der ID "colorDIV" beschränken.