JavaScript – die besten Beiträge

Verwandte Themen
anonym123679
17.04.2025, 11:29

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:
HTML, programmieren, JavaScript, Problemlösung
1 Antwort

Meistgelesene Beiträge zum Thema JavaScript

Mehr meistgelesene Fragen zu JavaScript