Untitled

// Lyssnar på händelsen "DOMContentLoaded", vilket inträffar när hela HTML-dokumentet har laddats klart i webbläsaren
document.addEventListener("DOMContentLoaded", (event) => {
  // Visa de initiala värdena för widgetarna
  updateWidgetDisplay();
 
 
  // Listener för knapparna
  document.querySelector("#buttons").addEventListener("input", (event) => {
    // Uppdatera visningen av widgetarna vid varje händelse
    updateWidgetDisplay();
  });
 });
 
 
 // Funktion för att uppdatera visningen av widgetarna
 function updateWidgetDisplay() {
  // Skapa en array för att lagra värdena från varje toggle-knapp
  let toggleValues = [];
 
 
  // Loopa igenom varje toggle-knapp och lägg till dess värde i arrayen
  document.querySelectorAll("toggle-button").forEach((widget) => {
    toggleValues.push(widget.value);
  });
 
 
  // Uppdatera innehållet i HTML-elementet med id "button-values" med de samlade värdena
  document.querySelector("#button-values").innerHTML = toggleValues.join(", ");
 }