Farbwechsler HTML?

Angenommen man hat ein h1 Tag auf einer HTML Seite.

Wie könnte man es machen, dass sich die Schriftfarbe des h1 tags jede Sekunde ändert?

Beispiel: blau, rot, blau, rot, blau, rot, blau, rot..... ( jede Sekunde ein Farbwechsel)

Ich weiß, dass es irgendwie mit JS funktioniert, aber wie genau, weiß ich nicht

Kann mir jemand helfen? Danke im Voraus

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Programmieren & Softwareentwicklung

16.07.2022, 17:26

Dafür brauchst du nichtmal JS, das geht per CSS Animation:

h1 {
  animation: colorChange 2s infinite;
}

@keyframes colorChange {
  0%, 49% {
    color: red;
  }
  50%, 100% {
    color: blue;
  }
}

Demo: https://jsfiddle.net/u1neaL0s/1/

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

geheim007b

16.07.2022, 17:25

stichworte wäre setintervall, die farben in ein array packen und per rand zufällig auswählen. setzen dann per css.

Hallo zusammen,

ich benötige einen Code. Ich möchte einen Paragraphen anzeigen lassen mit einem Text, der sich auf Knopfdruck ändern lässt und immer eine Value weiter springt, wenn ich diesen Button anklicke. Wie schreibe ich diesen Code mit HTML und JS?

Ich finde leider nur Hilfe für einen Text, der sich nur einmalig per Knopfdruck ändert. Ich möchte aber, dass dieser sich jedes Mal ändert, sobald ich den Button nochmal anklicke.

...zur Frage

Braucht man SSH um Node JS apps zu Deployen?

Meine index.js :

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);

http.listen(3000,()=>{
    console.log("working")
})
app.get('/index.html', (req, res) => {
    res.send('<h1>Hello world</h1>');
  });

Lokal funktioniert das, wenn ich localhost:3000/index.html

aufrufe erscheint ein Hello World,

aber wenn ich das ganze über FTP hochlade und url/index.html aufrufe :

Leere Html Seite und Konsole Error :

index.js:1 Uncaught ReferenceError: require is not defined

Also hat der Server garkein Node JS.

SSH hab ich aber garnicht, um dann mit irgendwelchen Ubuntu Commands das zu installieren, sudo apt install nodejs ...

Sry wenn es eine Dumme Frage ist aber ich hab bis jetzt nur Serverseitig Php gemacht und das ist sehr simple.

Man benutzt Fetch oder Ajax und im php skript echo "hello world"; und das wars.

Wollte mich an Node JS Ranwagen, das ganze ist aber viel komplexer.

(Bin bei All inkl)

...zur Frage

java script html text verändern jede sekunde?

wie kann man mit javascript machen das in html jede sekunde oder jede zweite sekunde sich der text ändert

...zur Frage

Welche Programmiersprache muss ich verwenden?

Hallo! Ich möchte ein Programm mit HTML, CSS und JS machen, welches ein Formular und eine Datensammlung hat. Sobald das Formular abgegeben wurde, sollen sich die Daten, je nach den im Formular angegeben Daten, ändern.

Ist das nur mit HTML, CSS und JS möglich, bzw welche andere(-n) Programmiersprache(-n) muss ich verwenden? Vorzugsweise soll es nur eine lokale Datei auf meinem Computer sein, die sich ändert.

...zur Frage

Hallo, wie kann ich einen Button in HTML/Javascript erstellen, der die Farbe ändert?

Ich möchte einen Button erstellen, der dann die Textfarbe von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot und sollen nach dem Klick auf einen Button schwarz werden. Geht das?

Ich habe die Schriftfarben mit CSS über eine ID gemacht:

diese 3 Punkte sollen über einen Klick auf einen Button schwarz werden.

...zur Frage

Wie kann ich einem Button (html, css, javascript) mehrere Funktionen zuweisen?

Hallo Zusammen, ich bin Neuling und möchte einen Button erstellen, welcher drei verschiedene Textfarben von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot, orange, gelb und sollen nach dem Klick auf einen Button schwarz werden.

Kann mir dabei jemand helfen?

Dabei soll die Formatierung der Textzeilen genau so bleiben:

Danke und liebe Grüße

...zur Frage

Einfacher Taschenrechner JS?

Hallo :)

Ich soll einen einfachen Taschenrechner mit Eingabefeldern erstellen, so dass er am Ende wie im Bild aussieht, ich weiß nur nicht, wie ich den <script> Teil schreiben muss, sodass er auch tatsächlich funktioniert, kann mir da jemand weiterhelfen?

Hier noch mein bisheriger Code:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktikum Webanwendungen 1</title>
    <style>
      input,
      button {
        margin: 10px;
      }
    </style>
    <script>
     
    </script>
  </head>
  <body>
    <h1>Taschenrechner</h1>
    <label for="number1">Zahl1:</label>
    <input id="number1" type="number">


    <label for="number2">Zahl2:</label>
    <input id="number2" type="number">


    <div>
      <button onclick="add()">+</button>
      <button onclick="subtract()">-</button>
      <button onclick="multiply()">x</button>
      <button onclick="divide()">/</button>
    </div>


    <label for="result">Ergebnis:</label>
    <input id="result" type="number">
  </body>
</html>

...zur Frage

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zur Frage

h3 Text ändern in JS?

Wie kann ich in JS den Text eines h3 tags ändern? egal was ich probiere, innerHTML, text, innerText oder html. Es kommt immer dieser Fehler:

Uncaught TypeError: Cannot set property 'innerText' of null

at eval (eval at <anonymous> (contact.php?error:%uEm%uS%uCt&FNV=fxbxcbxcb&LNV=xcbxcbxcb&mailSent:1), <anonymous>:1:54)

Wie behebe ich diesen Fehler?

...zur Frage

Javascript Bilder per Knopf austauschen?

Ich will in meiner Website ein Bild einfügen, welches man per Knopfdruck austauschen kann. Ich habe den Code von dieser Website benutzt http://droeppez.de/download/js-tut/js-tut/tutorial/bilder1.html).

Auf meiner Website ist oben links ein Bild mit dem Logo und weiter unten das Bild was ausgetauscht werden soll. Will ich jetzt das Bild ändern, ändert sich das Logo oben in der Ecke und nicht das Bild was sich eigentlich ändern soll. Die Knöpfe funktionieren aber.

Meine Frage ist nun kann man das Bild was sich eigentlich ändern soll, irgendwie auswählen, damit sich nur das bestimmte Bild ändert?

ps. Bin noch neu und kenn mich nicht so gut aus.

...zur Frage

Schriftfarbe in einem Iframe ändern?

Hallo,

Also folgendes Scenario, ich schreibe gerade an einer Website die einen iframe enthält der sich im selben Ordner befindet.

Auf der Hauptseite habe ich die Möglichkeit eingebaut den style zu ändern, dies ermögliche ich mit zwei verschiedenen .css Datein zwischen denen es möglich ist zu wählen. Jetzt möchte ich das sich die Schriftfarbe (.css file) von dem iframe auch ändert wenn ich auf der Hauptseite zb 1.css ausgewählt habe (will heißen das auf der Seite die im iframe angezeigt wird entweder 1.css oder 2.css geladen wird, immer davon abhängig welche der beiden gerade auf der Hauptseite aktiv ist). Ich denke das es möglich sein muss entweder mit js oder css (beide seiten könnten auch auf das selbe css/js zugreifen).

Meine frage ist also wie kann ich das bewerkstelligen. Andere idee die ich hatte ist das man ja vlt. auch einen filter über den iframe legen könnte der eine bestimmte Farbe ein eine andere ändert, bin leider relativ neu auf diesem Gebiet und habe leider keine Antwort auf Google gefunden die funktioniert

...zur Frage

JS : mit onclick Farbe eines Elements ändern?

Hallo,

(der Titel der Frage mag etwas komisch klingen, aber ich wusste nicht wie ich es sonst noch formulieren soll)

ich habe mal wieder ein Problem.

Ich habe Code geschrieben, der ein Array "visualisiert" bzw. es in eine HTML Liste einfügt, nun möchte ich, dass beim klicken auf ein Element sich die Farbe des Elements ändert und zusätzlich noch anderer Code ausgeführt wird.

Mein Problem :

Ich weiß nicht welches Element geklickt wurde. Ich füge ja ein Array in eine Liste ein, unzwar immer nach der gleichen "Vorlage", danach füge ich noch Klassen hinzu und muss eben auch das onlick mit JS hinzufügen.

Es klingt hier alles sehr komisch, aber ich weiß nicht wie ich es besser erklären soll.

Ich habe nochmal einen Kommentar an der onclick stelle geschrieben.

Ich finde keine Lösung, die es möglich mach, dass man unendlich viele Elemente mit push zum Array hinzufügen kann, diese dann wieder in die Liste einfügt und es trotzdem möglich ist, dass bestimmter Code ausgeführt wird

Wer es nicht verstanden hat, ich habe auch Discord zur Not könnte ich auch versuchen es mündlich zu erklären, wie ich es meine. (schriftlich ist grade bisschen schwer)

Danke für jede Antwort.

Ich bin gerade am verzweifeln

...zur Frage

Java Script - Wieso ändert sich die Hintergrundfarbe nicht (backgroundColor)?

Moin zusammen,

Wieso ändert sich hier nicht die Hintegrund-farbe (backgroundColor) von dem <h1>-Element, wenn man den Code mit HTML ausführt?


var h1 = document.createElement('h1');
document.body.appendChild(h1);


setInterval(colors, 1000);

let h1style = h1.style;

let farben = ['"green"','"red"', '"orange"', '"yellow"', '"pink"';


                            function colors(){


                            let n = Math.floor(Math.random() *10);
                            h1style.backgroundColor = farben[n];


                            h1.innerHTML = farben[n];
                            vergangeneZeit++;

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen