HTML und JS Seitentitel alle 0.2 Sekunden ändern?
Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?
Ich bedanke mich für verstandlichen Code!
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Title Changer</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<script src="./app.js"></script>
Click the button below to make the title go cRaZyYyYyY!
<button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
</body>
</html>
CSS:
body{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
text-align: center;
}
JavaScript:
async function makeitCrazy(){
while(true){
document.title = 'One';
await (1);
document.title = 'Two';
}
}
2 Antworten
<body>
<button>Click</button>
<script>
// Der 0te Button, es gibt nur einen
const button = document.querySelectorAll("button")[0];
//dasselbe wie wenn du onclick im html schreiben würdest
button.addEventListener("click", test1);
function test1(){
document.title = "Hello";
console.log(document.title);
// 1 sekunde warten
setTimeout(() => {
//ruft test2 auf
test2();
}, 1000);
}
function test2(){
document.title = "World"
console.log(document.title);
// 1 sekunde warten
setTimeout(() => {
// ruft test 1 auf , endlosschleife
test1();
}, 1000);
}
</script>
</body>
Der Code ändert jede Sekunde den Titel, bei 0.2 Sekunden siehst du nicht wie es sich verändert und dein Programm zieht viel zu viel Rechenleistung.
Es würde auch so gehen
<button id="myButton>Speichern
</button>
let button = document.getElementById("myButton");
oder
let button = querySelector(#"myButton");
mit Query Selector All musste ich halt nicht extra eine id vergeben, es wählt alle buttons aus, speichert sie in einem Array und ich habe nur einen button im Code.
Die 1000 im Code bedeuten 1000 Millisekunden
falls du es schneller machen willst ändere es in 200 um aber macht wie gesagt keinen sinn.
soll das Programm überhaupt irgendwann aufhören ?
Die Anwendung von querySelector verlangt keinen ID-Selektor. Der folgende Ausdruck würde vollkommen ausreichen, um den ersten Button im Dokument zu erhalten. Es muss dabei nicht, der komplette body-Part des Dokuments (so wie bei querySelectorAll) durchlaufen werden.
const button = document.querySelector("button");
Dein Code ist an der Stelle übrigens so nicht richtig. Die Methode braucht ein Objekt (document) und der ID-Selektor gehört in den String.
let button = document.querySelector("#myButton");
Es wäre gut wenn man das mit einem 2 ten Button wieder stoppen kann, ja. Jetzt verstehe ich auch die Zeile :)
Die setInterval-Funktion erlaubt es dir, in regelmäßigen zeitlichen Intervallen eine Aktion durchzuführen.
Minimalbeispiel:
<!doctype html>
<title>Example</title>
<button id="change-title-button">Click me</button>
<script>
const changeTitleButton = document.getElementById("change-title-button");
changeTitleButton.addEventListener("click", () => {
let number = 0;
setInterval(() => document.title = number++, 200);
});
</script>
Dem Button wird ein Handler für das Klickereignis zugeordnet. Dieser startet ein Interval, welches alle 200 Millisekunden den Titels des Dokuments ändert. Ich nehme für den Inhalt eine Variable (number), die bei jedem Intervallschritt um 1 erhöht wird.
Zu beachten wäre bei diesem Beispiel, dass es früher oder später zu einem Überlauf der Zahl kommen würde.
Hi! Vielen Dank für deine Mühe... Klappt reibungslos.
Diese Zeile hier verstehe ich nicht:
const button = document.querySelectorAll("button")[0];