+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Snowflakes (/showthread.php?tid=2675)
Snowflakes - tom48 - 14.11.2023
Hallo zusammen,
ich möchte für meine Website folgende JS implementieren, bin aber irgendwie zu doof: https://codepen.io/tutsplus/pen/BaVqjvg
Identisch zum Code (also copy-paste) habe ich die das html-,js- und css-file angelegt. das js- & css- sind auch entsprechend aufrufbar über das html, jedoch fallen keine schneesterne und der debugger in firefox zeigt mir im jf folgende fehler an: Uncaught TypeError: snowContainer is null
Ich wäre dankbar, wenn mir jemand einen Tipp geben könnte, was ich denn falsch mache.
danke vorweg.
RE: Snowflakes - rzscout - 14.11.2023
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:
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
RE: Snowflakes - tom48 - 15.11.2023
(14.11.2023, 19:43)rzscout schrieb: 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:
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
Hi scoutrz
Vielen Dank für Deine Hilfe!!!
Du hast mich wirklich weitergebracht! Top!
Vg tom48