Zufalls auswahl aus liste mit html und javascript?

Wie kann ich folgendenes machen?

Eine Liste mit Aufgaben und durch drücken auf ein Button wird dan eine Sache aus der Liste angezeigt.

Answer 1

[medmonk]

Speichere alle Aufgaben in einem Array oder arbeite mit einem Input-Feld, um darüber neue und weitere Aufgaben hinzufügen zu können. Danach legst du dir eine oder mehrere Funktionen an, mit denen das Array ausgeben wird.

HTML:

<div>
  <h2>Aufgaben</h2>
  <ul class="tasks">
  <ul>
  <button class="btn">Aufgabe per Zufall</button>
</div>

JavaScript:

// Ein Array mit Objekten
const tasks = [
  {title: "Aufgabe 1", note: "Einkauf"},
  {title: "Aufgabe 2", note: "Sport"},
  {title: "Aufgabe 3", note: "Arbeit"}
];

// Liste aus einem Array generieren
const renderTasks = (arr) => {
  let el = document.querySelector(".tasks");
  el.innerHTML = "";
  arr.forEach((item) => {
    el.innerHTML += `<li>${item.title}: ${item.note}</li>`;
  });
};

// Zufälligen Eintrag aus einem Array
const renderRandomTask = (arr) => {
  let el = document.querySelector(".tasks");
  el.innerHTML = "";
  let randomTask = arr[Math.floor(Math.random() * arr.length)];
  el.innerHTML += `<li>${randomTask.title}: ${randomTask.note}</li>`;
};

// Zufälligen Task durch Click-Event 
document.querySelector(".btn").addEventListener("click", () => {
  renderRandomTask(tasks);
});

// Funktion aufrufen
renderTasks(tasks);

Nachtrag:
Du kannst das Ausgeben sämtlicher Aufgaben auch komplett weglassen und lediglich im Hintergrund durch dein Array iterierst, um dann beim Klick auf den Button irgendeinen Eintrag aus deinem Array auszugeben.

LG medmonk

Woher ich das weiß: Berufserfahrung – UI/UX Designer, Full-Stack Developer