Code Probleme JavaScript?
Hallo! Ich weiß, es ist wirklich unprofessionell, aber ich komme mit meinem Code einfach nicht weiter. Nichts funktioniert mehr, die Filter und die Suchbegriffe.
Hier ist er:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pflanzen-Suche</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: darkgreen;
color: white;
}
input, select {
border-radius: 8px;
padding: 5px;
background-color: brown;
color: lightgreen;
border: 1px solid green;
margin: 5px;
}
h1 {
text-align: center;
color: lightgreen;
}
.search-container {
text-align: center;
margin-bottom: 20px;
}
.results {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.plant-card {
background-color: lightgreen;
border: 1px solid dimgray;
border-radius: 10px;
margin: 10px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 250px;
text-align: center;
color: black;
}
.plant-card img {
width: 250px;
height: 350px;
object-fit: cover;
border-radius: 5px;
}
.plant-card h3 {
margin: 10px 0;
font-size: 1.2em;
}
.care-tips {
margin-top: 15px;
font-size: 0.9em;
color: gray;
text-align: left;
}
h4 {
font-weight: 400;
font-family: Monospace, Times, serif;
display: inline;
font-size: 1em;
color: dimgray;
}
.filter {
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Pflanzen-Suche</h1>
<div class="search-container">
<input
type="text"
id="searchInput"
oninput="searchPlants()"
placeholder="Suche Pflanzen..."
/>
</div>
<div class="filter">
<label>Frostresistenz:
<select id="frostFilter" onchange="searchPlants()">
<option value="">alle</option>
<option value="-05">bis -5°</option>
<option value="-10">bis -10°</option>
<option value="-15">bis -15°</option>
<option value="-20">bis -20°</option>
</select>
</label>
<label>Standort:
<select id="standortFilter" onchange="searchPlants()">
<option value="">alle</option>
<option value="pralleSonne">pralle Sonne</option>
<option value="sonne">Sonne</option>
<option value="halbschatten">Halbschatten</option>
<option value="schatten">Schatten</option>
</select>
</label>
<label>Schwierigkeit:
<select id="schwierigkeitFilter" onchange="searchPlants()">
<option value="">alle</option>
<option value="1">leicht</option>
<option value="2">eher leicht</option>
<option value="3">mittel</option>
<option value="4">eher anspruchsvoll</option>
<option value="5">anspruchsvoll</option>
</select>
</label>
<label>Blütenfarbe:
<select id="farbeFilter" onchange="searchPlants()">
<option value="">alle</option>
<option value="weiß">weiß, grün</option>
<option value="gelb">gelb, cremefarben</option>
<option value="rot">rot, rosa, violett</option>
</select>
</label>
</div>
<div id="anonymousContainer">
Pflanzensuche...
</div>
<div class="results" id="resultsContainer"></div>
<script>
</script>
</body>
</html>
Und hier der JavaScript-Part:
Bitte den JavaScript noch vollständig pasten.
Aufgrund der Zeichenbegrenzung ist der JavaScript-Teil nicht sichtbar, aber ich habe ihn Stück für Stück unter die Nachricht von SikerimAMK31 kommentiert.
Tja, der Javascript-Part sieht schon sehr leer aus ...
Siehe die Kommentar unter der Nachricht von @SikerimAMK31, da ist der Code Stück für Stück. Entschuldigung!
Schreib das Ganze nochmal. Den gesamten Code aus einer Frage und vier Kommentaren zusammenzuklauben, hat niemand Lust
Geht nicht. Zeichenbegrenzung. Wenn sich, sag bitte, wie - dann weiß ich es nicht.
1 Antwort
Nun, wenn das JavaScript leer ist kann das ja auch schlecht was werden, oder?
const plants = [
{
name: 'Sarracenia purpurea, Purpurrote Schlauchpflanze',
frostFilter: '-10',
standortFilter: ['sonne', 'pralleSonne', 'halbschatten'],
schwierigkeitFilter: '1',
farbeFilter: 'rot',
careTips: `
<h4>Schwierigkeit:</h4> leicht<br>
<h4>Standort:</h4> *Sonne, *pralle Sonne, Halbschatten.<br>
<h4>Gießen:</h4> Regelmäßig mit kalkfreiem Wasser; das Substrat sollte immer feucht sein. Staunässe wird während des Sommerhalbjahres vertragen.<br>
<h4>Substrat:</h4> locker, sauer, wasserspeichernd, organisch, kalkfrei. Beispiel: Weißtorf, Pinienrinde, Perlite 1:1:1<br>
<h4>Winterruhe:</h4> 0-20°, Blätter können sich bei < 15° zurückbilden oder aufhören zu wachsen. Ausgepflanzt bis -10°.<br>
<h4>Unterarten:</h4> Es gibt zwei Unterarten: ssp. <i>purpurea</i> und ssp. <i>venosa</i>. <i>S. p. </i>ssp.<i> venosa</i> ist bauchiger und hat einen welligen Deckelrand, während ssp. <i>pupurea</i> meist einen glatteren Deckelrand hat.<br>
Unabhängig von der Unterart gibt es purpurrote und grüne Exemplare.<br>
<h4>Blütenfarbe:</h4> rosa bis purpurrot.<br>
<h4>Weitere Infos:</h4> Als eine der wenigen Schlauchpflanzen macht es ihr auf Dauer nichts aus, wenn Regenwasser in ihre Schlauchblätter gelangt - sie mag es sogar.
`
},
{
name: 'Sarracenia oreophila, Grüne Schlauchpflanze',
frostFilter: '-15',
standortFilter: ['sonne', 'pralleSonne'],
schwierigkeitFilter: '2',
farbeFilter: 'gelb',
image: 'https://apps.rhs.org.uk/plantselectorimages/detail/Sarracenia_oreophila_10552.jpg',
careTips: `
<h4>Schwierigkeit:</h4> mittelleicht<br>
<h4>Standort:</h4> *pralle Sonne, Sonne.<br>
<h4>Gießen:</h4> Regelmäßig mit kalkfreiem Wasser; Das Substrat sollte immer feucht sein. Staunässe wird während des Sommerhalbjahres vertragen.<br>
<h4>Substrat:</h4> locker, sauer, wasserspeichernd, semimineralisch, kalkfrei. Beispiel: Weißtorf, Perlite, Pinienrinde, Quarzsand 2:2:1:1<br>
<h4>Winterruhe:</h4> 0-12°, Blätter können sich zurückbilden und aufhören zu wachsen. Ausgepflanzt bis -15°.<br>
<h4>Varietäten:</h4> Es gibt mehrere Varietäten und Formen, die sich zB. durch stärkere Ausprägung der Aderung kennzeichnen. Einige von denen sind aber bereits ausgestorben.<br>
<h4>Blütenfarbe:</h4> gelb.<br>
<h4>Weitere Infos:</h4> Wegen ihres großen Deckels und der hohen Frostresistenz ist die Pflanze relativ beliebt.
`
},
{
name: 'Sarracenia leucophylla, Weiße Schlauchpflanze',
frostFilter: '-10',
standortFilter: ['sonne', 'pralleSonne'],
schwierigkeitFilter: '2',
farbeFilter: 'rot',
careTips: `
<h4>Schwierigkeit:</h4> mittelleicht<br>
<h4>Standort:</h4> *pralle Sonne, Sonne.<br>
<h4>Gießen:</h4> Regelmäßig mit kalkfreiem Wasser; das Substrat sollte immer feucht sein. Staunässe wird während des Sommerhalbjahres vertragen.<br>
<h4>Substrat:</h4> locker, sauer, wasserspeichernd, organisch, kalkfrei. Beispiel: Weißtorf, Pinienrinde, Perlite 1:1:1<br>
<h4>Winterruhe:</h4> 0-15°, Blätter können sich zurückbilden oder aufhören zu wachsen. Ausgepflanzt bis -10°.<br>
<h4>Varietäten:</h4> Es gibt eine Varietät (var. <i>alba</i>), die weniger Rot- und dafür mehr Weißtöne besitzt. Unabhängig davon kann aber auch so der Gehalt an rotem Farbdtoff schwanken.<br>
<h4>Blütenfarbe:</h4> tiefrot.<br>
<h4>Weitere Infos:</h4> Oft wird diese Pflanze mit <i>S. psittacina</i> oder <i>purpurea</i> gekreuzt, dann bleiben die Schläuche niedriger und sind rötlicher ausgefärbt.
`
},
{
name: 'Sarracenia x Hybrida, Baumarkt-Schlauchpflanze',
frostFilter: '-05',
standortFilter: ['sonne', 'pralleSonne', 'halbschatten'],
schwierigkeitFilter: '1',
farbeFilter: 'rot',
image: 'https://cdn.pixabay.com/photo/2020/01/23/21/28/sarracenia-4788783_1280.jpg',
careTips: `
<h4>Schwierigkeit:</h4> leicht<br>
<h4>Standort:</h4> *Sonne, pralle Sonne, Halbschatten.<br>
<h4>Gießen:</h4> Regelmäßig mit kalkfreiem Wasser; das Substrat sollte immer feucht sein. Staunässe wird während des Sommerhalbjahres vertragen.<br>
<h4>Substrat:</h4> eher locker, sauer, wasserspeichernd, organisch, kalkfrei. Beispiel: Weißtorf, Perlite 1:1<br>
<h4>Winterruhe:</h4> 5-20°, Blätter können sich bei < 15° zurückbilden oder aufhören zu wachsen. Ausgepflanzt bis -5°.<br>
<h4>Varietäten:</h4> ... gibt es nicht, da es sich um eine Kreuzung handelt. Natürlich gibt es aber stärkere Abweichungen im Aussehen, denn diese Hybriden sind oft Kreuzungen aus <i>S. purpurea, S. flava, S. leucophylla</i> oder <i>S. rubra</i>.<br>
<h4>Blütenfarbe:</h4> tiefrot, rosa bis gelblich, je nach Elternarten.<br>
<h4>Weitere Infos:</h4> Für den Einstieg in die Welt der Schlauchpflanzen super gut geeignet.
`
}
// Weitere Pflanzenobjekte hier
];
let noResultsMessage;
function searchPlants() {
const query = document.getElementById("searchInput").value.toLowerCase();
const frost = document.getElementById("frostFilter").value;
const standort = document.getElementById("standortFilter").value;
const schwierigkeit = document.getElementById("schwierigkeitFilter").value;
const farbe = document.getElementById("farbeFilter").value;
const filtered = plants.filter(plant => {
const nameMatch = plant.name.toLowerCase().includes(query);
const frostMatch = !frost || parseInt(plant.frostFilter);
const standortMatch = !standort || plant.standortFilter.includes(standort);
const schwierigkeitMatch = !schwierigkeit || plant.schwierigkeitFilter === schwierigkeit;
const farbeMatch = !farbe || plant.farbeFilter === farbe;
return nameMatch && frostMatch && standortMatch && schwierigkeitMatch && farbeMatch;
});
const resultsContainer = document.getElementById("resultsContainer");
resultsContainer.innerHTML = "";
const anonContainer = document.getElementById("anonymousContainer");
if (filtered.length === 0) {
anonContainer.innerHTML = "<p style='background-color: red; color: white; font-weight: 600; border-radius: 8px; padding: 8px 10px;'>Keine Pflanzen gefunden.</p>";
return; // Verhindert, dass forEach aufgerufen wird
} else {
anonContainer.innerHTML = "";
}
filtered.forEach(plant => {
const card = document.createElement("div");
card.className = "plant-card";
card.innerHTML = `
<img src="${plant.image}" alt="${plant.name}" />
<h3>${plant.name}</h3>
<div class="care-tips">${plant.careTips}</div>
`;
resultsContainer.appendChild(card);
});
}
// Initialer Aufruf
searchPlants();
Oh, sorry! Das ging anscheinend nicht wegen der maximalen Zeichenbegrenzung. Ich versuche es mal so:
const frostFilter = document.getElementById("frostFilter");
const standortFilter = document.getElementById("standortFilter");
const schwierigkeitFilter = document.getElementById("schwierigkeitFilter");
const farbeFilter = document.getElementById("farbeFilter");