Javascript-Farbe ändern?

Hallo, ich möchte, dass mein div-container automatisch die Farbe ändert, also von weiß zu grau und dann wieder zu weiß und so weiter,..... Wie mache ich das?

Code:

<div class="Hallo">
  <div id="strombergsoutput">
</div>

LeBonyt

21.08.2022, 13:24

Wie und wann automatisch ändern? Welches Ereignis soll die Farbänderung auslösen?

Lindner12

Fragesteller

21.08.2022, 13:28

Die background-color soll sich ändern, und das automatisch also jede 5 Sekunden sobald die Seite geladen ist.

2 Antworten

HoiZusammen

21.08.2022, 13:42

let i = 0;
function change() 
{

  let div = document.getElementById("strombergsoutput");
  let color = ["black", "blue", "brown", "green"];

  div.style.backgroundColor = color[i];
  i = (i + 1) % color.length;
}
setInterval(change, 5000);

Ich würde es mit CSS lösen und nicht mit JS

elmex7

21.08.2022, 13:34

Würde ich eher mit CSS Transitions oder Animationen machen heutzutage.

So wie hier erklärt z.b.:

https://techstacker.com/how-to-loop-background-color-animation-css/

https://codepen.io/StrengthandFreedom/pen/PoqZRgM

Kann mir bitte jemand sagen wie ich mit JavaScript die Farbe des Hintergrundes von einem div ändere?

Ich habe es schon mal versucht mit

document.getElementsByClassName("div").style.backgroundColor = "red"

zu ändern, aber es funktioniert nicht.

Wie mache ich das?

...zur Frage

Gibt es einen weg das wider zu entschlüsseln?

ich habe auf der Seite https://obfuscator.io meinen JavaScript code verschlüsselt.

kann ich vom verschlüsselten code wieder zurück zum javascript code, wenn ja wie?

mein Code:

function be() {
    let eingabe = document.getElementById('password').value;
    if (eingabe == 'das ist gut') {
        re();
    } else {
        alert('Falsches Passwort');
    }
}

function re() {
    let feld = document.getElementById('pas');
    feld.remove();
}

function lock() {
    document.getElementById('bod').innerHTML += `<div class="pass" id="pas">
    <div class="pass-1">
        <div class="pass-2 pass-3">
            <h2>Passwort eingeben um fortzufahren</h2>
        </div>
        <div class="pass-2">
            <input type="password" id="password" placeholder="Passwort eingeben">
        </div>
        <div class="pass-2">
            <button class="pass-4" onclick="be()">Betätigen</button>
        </div>
    </div>
</div>`
}

...zur Frage

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zur Frage

JavaScript will nicht (Text in Element ändern per onclick)?

Hallo alle miteinander,

ich tüftle derzeit daran, den Text eines Elements zu ändern, sobald im unteren Menü ein Feld angeklickt wurde. Das Ganze funktioniert jedoch nicht und ich verstehe nicht wirklich warum. Könnt ihr mir helfen den Fehler zu finden?

Die wli-Variablen sollen den neuen Text enthalten, da ich das für jemanden programmiere, der keine Ahnung von JavaScript hat und ich es somit vereinfachen wollte, das er den Text ohne etwas kaputt zu machen, bearbeiten kann.

Hier einmal der Code, an dem ich herumprobiert habe. Allerdings ohne den CSS-Teil:

<script type="text/javascript">
  wli1 = "wli1";
  wli2 = "wli2";
  wli3 = "wli3";
  wli4 = "wli4";
  wli5 = "wli5";
  wli6 = "wli6";

  function fwli1() {
    document.getElementById("werdegangcon").value = wli1;
  }

  function fwli2() {
    document.getElementById("werdegangcon").value = wli2;
  }

  function fwli3() {
    document.getElementById("werdegangcon").value = wli3;
  }

  function fwli4() {
    document.getElementById("werdegangcon").value = wli4;
  }

  function fwli5() {
    document.getElementById("werdegangcon").value = wli5;
  }

  function fwli6() {
    document.getElementById("werdegangcon").value = wli6;
  }
</script>
<div class="conh15">
  <div class="con100">
    <div class="con_top center nummer">
      <h3>Werdegang</h3>
    </div>
    <div class="con_mid center" id="werdegangcon">
      2394    Abschluss des Abiturs mit Auszeichnung</br>
      2394    Job als Haustechnikerin
    </div>
    <div class="con_bot center">
      <ul class="werdegang">
        <li id="weli1" onclick="fwli1()">vor der Akademie</li>
        <li id="weli2" onclick="fwli2()">2395</li>
        <li id="weli3"onclick="fwli3()">2399</li>
        <li id="weli4"onclick="fwli4()">2401</li>
        <li id="weli5"onclick="fwli5()">2402</li>
        <li id="weli6" onclick="fwli6()">2403</li>
      </ul>
    </div>
  </div>
</div>

...zur Frage

Mit AJAX ein HTML DIV ständig aktualisieren?

Hallo, ich würde gerne wissen, wie ich ein DIV Container mit AJAX alle 10 Sekunden aktualisieren kann.

...zur Frage

Zwei funktionen auf ein button packen?

Wie kann ich zwei funktionen auf einen Button packen? Also ich will das bei jedem click auf meinen button

1. immer plus 1 addiert wird: onclick="pluszahl()"

2. das ein Sound abgespielt wird: onclick="play()"

Leider konnte ich nur den counter machen und frage mich jetzt wie ich den sound auch aktivieren kann

HTML:

    <span class="center">Bam?</span>
    <div onclick="custom()" class="btn-container">
        <button onclick="pluszahl()"; twoclick="play()"    class="button1">
            Bam
        </button>
    </div>

    <div id="resultArea">0</div>

JavaScript:

function play() {
  var audio = new Audio('bam.mp3');
  audio.play();
}

function pluszahl() {
  document.getElementById("resultArea").innerHTML = parseInt(document.getElementById("resultArea").innerHTML)+1;
  }

...zur Frage

JavaScript auf Website ändern?

Mal angenommen wir haben einen Input

<input class="btn openNew" type="submit">

Wenn wir auf den Input drücken, öffnet sich ein neues Fenster.

Manchmal, bestimmt die Seite, kann es aber auch sein, dass sich erst ein Container öffnet

<div class="captcha-container"> // Captcha Content // </div>

Dann muss das Captcha gelöst werden und wir drücken nochmal auf den Input wodurch sicht das neue Fenster öffnet.

Nach was muss ich suchen, wenn ich wissen will, was für ein Fenster sich öffnet wenn ich auf den Input drücke? Suche ich deren JavaScript Datei durch nach sowas wie window.open(...)?

...zur Frage

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zur Frage

Javascript Farbe ändern?

Ich wollte fragen wie man bei Javascript die Farbe ändert also wenn man z.B.

var f = "[ Fail ]" macht das die Farbe dann rot wird wenn man das benutzt.

...zur Frage

Weiß jemand wie man die Farbe im PDFViewer ändert?

also hier links und rechts das grau zum Beispiel in rot ändern, weiß das jemand zum Beispiel für javascript?

...zur Frage

CSS Grid leere Zelle?

Hi,

bin gerade etwas Ratlos wie ich das mit css grid umsetzen kann.

Aktuelle habe ich folgenden Code

<div class="grid-container">
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div>Ich soll leer sein</div>
  <div class="grid-item">Ein Text</div>
  <input type="text" class="grid-item">
  <div class="grid-item">Ein Text</div>
  <select class="grid-item"></select>
  <div class="grid-item">Ein Text</div>
</div>

CSS 
.grid-container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(4, 1fr);
}

https://jsfiddle.net/tb2e75L8/2/

Jetzt will ich jedoch alle Div's mit dem Inhalt "Ich soll leer sein" aus dem html entfernen ohne jedoch die nachfolgenden zu verschieben. Also sozusagen eine Leere Zelle. Ich habe schon über grid-template-areas nachgelesen, jedoch bräuchte ich da für jedes item eine eigene ID, oder sehe ich das falsch?

Für sonstige Vorschläge zum realisieren von diesem Layout (auch ohne Grid) bin ich grundsätzlich auch offen.

Vielen Dank im Voraus

whgoffline

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

JavaScript: Bei jedem Klick plus 1 in der resultArea?

Moin, ich habe einen Button gemacht und zwar:

<div onclick="play()" class="button">
  <button class="button1">
    Bam
  </button>
</div>

und eine Result Area

<div id="resultArea"></div>

Wie kann ich es machen, dass bei jedem Klick auf den Button in der Result Area 1 addiert wird (sowas wie ein Cookie-Klicker)? Also so eine Art Counter.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen