14.11.2023, 19:43
Hi tom48,
das Problem ist ganz einfach erklärt und gelöst: Das HTML wurde noch nicht ganz geladen und das Script wird schon ausgeführt. Das führt dazu dass das Script Elemente die nicht geladen sind nicht verwenden kann. Eine Lösung ist es für das Dokument ein EventHandler zu erstellen der ausgelöst wird wenn die Seite vollständig geladen wurde.
So sieht das ganze aus:
Und hier das ganze mit deiner Schneeflockenseite:
Viel Erfolg
scoutrz
das Problem ist ganz einfach erklärt und gelöst: Das HTML wurde noch nicht ganz geladen und das Script wird schon ausgeführt. Das führt dazu dass das Script Elemente die nicht geladen sind nicht verwenden kann. Eine Lösung ist es für das Dokument ein EventHandler zu erstellen der ausgelöst wird wenn die Seite vollständig geladen wurde.
So sieht das ganze aus:
Code:
document.addEventListener('DOMContentLoaded', function() {
// Hier kommt dein Code rein!
});Und hier das ganze mit deiner Schneeflockenseite:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snowflakes</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
background: linear-gradient(to bottom, #2d91c2 0%, #1e528e 100%);
display: flex;
align-items: center;
justify-content: center;
font-family: "Pacifico", cursive;
height: 100vh;
padding: 20px;
text-align: center;
}
h1 {
color: white;
}
#snow-container {
height: 100vh;
overflow: hidden;
position: absolute;
top: 0;
transition: opacity 500ms;
width: 100%;
}
.snow {
animation: fall ease-in infinite, sway ease-in-out infinite;
color: skyblue;
position: absolute;
}
footer {
background-color: #ffdfb9;
bottom: 0;
font-family: sans-serif;
padding: 1rem;
text-align: center;
width: 100%;
}
footer a {
color: inherit;
text-decoration: none;
}
footer .heart {
color: #dc143c;
}
@keyframes fall {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100vh;
opacity: 1;
}
}
@keyframes sway {
0% {
margin-left: 0;
}
25% {
margin-left: 50px;
}
50% {
margin-left: -50px;
}
75% {
margin-left: 50px;
}
100% {
margin-left: 0;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const snowContainer = document.getElementById("snow-container");
const snowContent = ['❄', '❅', '❆']
const random = (num) => {
return Math.floor(Math.random() * num);
}
const getRandomStyles = () => {
const top = random(100);
const left = random(100);
const dur = random(10) + 10;
const size = random(25) + 25;
return `
top: -${top}%;
left: ${left}%;
font-size: ${size}px;
animation-duration: ${dur}s;
`;
}
const createSnow = (num) => {
for (var i = num; i > 0; i--) {
var snow = document.createElement("div");
snow.className = "snow";
snow.style.cssText = getRandomStyles();
snow.innerHTML = snowContent[random(3)]
snowContainer.append(snow);
}
}
const removeSnow = () => {
snowContainer.style.opacity = "0";
setTimeout(() => {
snowContainer.remove()
}, 500)
}
window.addEventListener("load", () => {
createSnow(30)
setTimeout(removeSnow, (1000 * 60))
});
window.addEventListener("click", () => {
removeSnow()
});
});
</script>
</head>
<body>
<main>
<h1>Happy Holidays!</h1>
</main>
<div id="snow-container" title="Click anywhere to remove snow">
</div>
<footer>
Pen by <a href="https://www.jemimaabu.com" target="_blank" rel="noopener">Jemima Abu ☃️</a>
</footer>
</body>
</html>Viel Erfolg
scoutrz
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 