Is there any way to making button list without dragging?

Usane · March 30, 2026, 5:33pm

Is this what you mean? It does not explain how you want to reorder the buttons.

Taifun · March 30, 2026, 7:28pm

I now edited that post and formatted the html correctly.
Below it is again

Taifun

<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Uhrzeit & Datum – Buttons</title>
</head>
<body>

<script>
// Globale Basis-Einstellungen für body
document.body.style.margin = "0"
document.body.style.padding = "0"
document.body.style.fontFamily = "Arial, Helvetica, sans-serif"
document.body.style.minHeight = "100vh"
document.body.style.background = "#f9f9f9"
document.body.style.fontSize = "18px"
// ────────────────────────────────────────────────
// MODUL: Uhrzeit
// ────────────────────────────────────────────────
Uhrzeit = {}
Uhrzeit.Tabelle = document.createElement("table")
    Uhrzeit.Tabelle.style.position = "fixed"
    Uhrzeit.Tabelle.style.top = "0px"
    Uhrzeit.Tabelle.style.right = "0px"
    Uhrzeit.Tabelle.style.zIndex = "100"
    Uhrzeit.Tabelle.style.borderCollapse = "collapse"
    Uhrzeit.Tabelle.style.backgroundColor = "#f8f8f8"
    Uhrzeit.Tabelle.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)"
// Zeilen
Uhrzeit.Zeile = []
Uhrzeit.Zeile[1] = document.createElement("tr")
Uhrzeit.Zeile[2] = document.createElement("tr")
Uhrzeit.Zeile[3] = document.createElement("tr")
Uhrzeit.Zeile[4] = document.createElement("tr")
// Buttons
Uhrzeit.Button = []
Uhrzeit.Button[1] = document.createElement("button")
Uhrzeit.Button[2] = document.createElement("button")
Uhrzeit.Button[3] = document.createElement("button")
Uhrzeit.Button[4] = document.createElement("button")
Uhrzeit.ButtonIndex = 1
while (Uhrzeit.ButtonIndex <= 4) {
    Uhrzeit.AktuellerButton = Uhrzeit.Button[Uhrzeit.ButtonIndex]
    
    Uhrzeit.AktuellerButton.style.width = "165px"
    
    Uhrzeit.AktuellerButton.style.height = "32px"
    
    Uhrzeit.AktuellerButton.style.border = "1px solid #888"
    
    Uhrzeit.AktuellerButton.style.margin = "0"
    
    Uhrzeit.AktuellerButton.style.padding = "0 4px"
    
    Uhrzeit.AktuellerButton.style.fontSize = "18px"
    
    Uhrzeit.AktuellerButton.style.backgroundColor = "#fff"
    
    Uhrzeit.AktuellerButton.style.color = "#222"
    
    Uhrzeit.AktuellerButton.style.cursor = "pointer"
    
    Uhrzeit.AktuellerButton.style.textAlign = "center"
    
    Uhrzeit.AktuellerButton.style.lineHeight = "1.3"
    
    Uhrzeit.AktuellerButton.style.borderRadius = "3px"
    
    Uhrzeit.AktuellerButton.style.boxShadow = "inset 0 1px 2px rgba(0,0,0,0.08)"
    
    Uhrzeit.ButtonIndex = Uhrzeit.ButtonIndex + 1
}
// ────────────────────────────────────────────────
// MODUL: Statusleiste
// ────────────────────────────────────────────────
Statusleiste = {}
Statusleiste.Tabelle = document.createElement("table")
    Statusleiste.Tabelle.style.position = "fixed"
    Statusleiste.Tabelle.style.top = "0px"
    Statusleiste.Tabelle.style.left = "0px"
    Statusleiste.Tabelle.style.zIndex = "100"
    Statusleiste.Tabelle.style.borderCollapse = "collapse"
    Statusleiste.Tabelle.style.backgroundColor = "#f8f8f8"
    Statusleiste.Tabelle.style.boxShadow = "0 2px 8px rgba(0,0,0,0.15)"
// Eine Zeile
Statusleiste.Zeile = document.createElement("tr")
// Buttons – 12 Stück
Statusleiste.Button = []
Statusleiste.Button[1]  = document.createElement("button")
Statusleiste.Button[2]  = document.createElement("button")
Statusleiste.Button[3]  = document.createElement("button")
Statusleiste.Button[4]  = document.createElement("button")
Statusleiste.Button[5]  = document.createElement("button")
Statusleiste.Button[6]  = document.createElement("button")
Statusleiste.Button[7]  = document.createElement("button")
Statusleiste.Button[8]  = document.createElement("button")
Statusleiste.Button[9]  = document.createElement("button")
Statusleiste.Button[10] = document.createElement("button")
Statusleiste.Button[11] = document.createElement("button")
Statusleiste.Button[12] = document.createElement("button")
Statusleiste.ButtonIndex = 1
while (Statusleiste.ButtonIndex <= 12) {
    Statusleiste.AktuellerButton = Statusleiste.Button[Statusleiste.ButtonIndex]
    
    Statusleiste.AktuellerButton.style.height = "32px"
    
    Statusleiste.AktuellerButton.style.border = "1px solid #888"
    
    Statusleiste.AktuellerButton.style.margin = "0"
    
    Statusleiste.AktuellerButton.style.padding = "0 8px"
    
    Statusleiste.AktuellerButton.style.fontSize = "18px"
    
    Statusleiste.AktuellerButton.style.backgroundColor = "#fff"
    
    Statusleiste.AktuellerButton.style.color = "#222"
    
    Statusleiste.AktuellerButton.style.cursor = "pointer"
    
    Statusleiste.AktuellerButton.style.textAlign = "center"
    
    Statusleiste.AktuellerButton.style.lineHeight = "1.3"
    
    Statusleiste.AktuellerButton.style.borderRadius = "3px"
    
    Statusleiste.AktuellerButton.style.boxShadow = "inset 0 1px 2px rgba(0,0,0,0.08)"
    
    Statusleiste.AktuellerButton.style.marginRight = "8px"
    
    Statusleiste.ButtonIndex = Statusleiste.ButtonIndex + 1
}
// Labels
Statusleiste.Button[1].textContent  = "Bildschirmbreite"
Statusleiste.Button[3].textContent  = "Ub:"
Statusleiste.Button[5].textContent  = "Uh:"
Statusleiste.Button[7].textContent  = "Sb:"
Statusleiste.Button[9].textContent  = "Sh:"
Statusleiste.Button[11].textContent = "Bildschirmhoehe:"
// ────────────────────────────────────────────────
// MODUL: Textarea
// ────────────────────────────────────────────────
Textarea = document.createElement("textarea")
    Textarea.style.position = "fixed";
    Textarea.style.fontFamily = "monospace"
    Textarea.style.fontSize = "18px"
    Textarea.style.width = Statusleiste.Bildschirmbreite + "px"
    //Textarea.style.maxWidth = "900px"
    Textarea.style.height = "180px"
    // Textarea.style.margin = "220px auto 40px"
    Textarea.style.display = "block"
    Textarea.style.padding = "12px"
    Textarea.style.border = "1px solid #aaa"
    Textarea.style.borderRadius = "6px"
    Textarea.style.resize = "vertical"
Textarea.placeholder = "Hier erscheint der Inhalt der angeklickten Buttons ..."
// ────────────────────────────────────────────────
// MODUL: Bausteine
// ────────────────────────────────────────────────
Bausteine = {}
Bausteine.Tabelle = document.createElement("table")
    Bausteine.Tabelle.style.position = "fixed";
    //Tabelle.style.margin = "40px auto"
    Bausteine.Tabelle.style.borderCollapse = "collapse"
Bausteine.Zeile = document.createElement("tr")
Bausteine.Button = []
Bausteine.Button[1] = document.createElement("button")
Bausteine.Button[2] = document.createElement("button")
Bausteine.Button[3] = document.createElement("button")
Bausteine.Button[4] = document.createElement("button")
Bausteine.Button[5] = document.createElement("button")
Bausteine.Button[6] = document.createElement("button")
Bausteine.Button[7] = document.createElement("button")
Bausteine.Button[8] = document.createElement("button")
Bausteine.Button[1].textContent = "Tabelle"
Bausteine.Button[2].textContent = "Button"
Bausteine.Button[3].textContent = "Label"
Bausteine.Button[4].textContent = "Textarea"
Bausteine.Button[5].textContent = "Status"
Bausteine.Button[6].textContent = "Live-Uhr"
Bausteine.Button[7].textContent = "Abstand"
Bausteine.Button[8].textContent = "Kommentar"
Bausteine.ButtonIndex = 1
while (Bausteine.ButtonIndex <= 8) {
    Bausteine.AktuellerButton = Bausteine.Button[Bausteine.ButtonIndex]
    
    Bausteine.AktuellerButton.style.width = "140px"
    
    Bausteine.AktuellerButton.style.height = "36px"
    
    Bausteine.AktuellerButton.style.border = "1px solid #888"
    
    Bausteine.AktuellerButton.style.margin = "4px"
    
    Bausteine.AktuellerButton.style.padding = "0 8px"
    
    Bausteine.AktuellerButton.style.fontSize = "17px"
    
    Bausteine.AktuellerButton.style.backgroundColor = "#eef"
    
    Bausteine.AktuellerButton.style.color = "#222"
    
    Bausteine.AktuellerButton.style.cursor = "pointer"
    
    Bausteine.AktuellerButton.style.textAlign = "center"
    
    Bausteine.AktuellerButton.style.lineHeight = "1.3"
    
    Bausteine.AktuellerButton.style.borderRadius = "4px"
    
    Bausteine.AktuellerButton.style.boxShadow = "inset 0 1px 2px rgba(0,0,0,0.08)"
    
    Bausteine.ButtonIndex = Bausteine.ButtonIndex + 1
}
// ────────────────────────────────────────────────
// DOM-Zusammenbau
// ────────────────────────────────────────────────
// Uhrzeit DOM
Uhrzeit.Zeile[1].appendChild(Uhrzeit.Button[1])
Uhrzeit.Zeile[2].appendChild(Uhrzeit.Button[2])
Uhrzeit.Zeile[3].appendChild(Uhrzeit.Button[3])
Uhrzeit.Zeile[4].appendChild(Uhrzeit.Button[4])
Uhrzeit.Tabelle.appendChild(Uhrzeit.Zeile[1])
Uhrzeit.Tabelle.appendChild(Uhrzeit.Zeile[2])
Uhrzeit.Tabelle.appendChild(Uhrzeit.Zeile[3])
Uhrzeit.Tabelle.appendChild(Uhrzeit.Zeile[4])
// Statusleiste DOM
Statusleiste.Zeile.appendChild(Statusleiste.Button[1])
Statusleiste.Zeile.appendChild(Statusleiste.Button[2])
Statusleiste.Zeile.appendChild(Statusleiste.Button[3])
Statusleiste.Zeile.appendChild(Statusleiste.Button[4])
Statusleiste.Zeile.appendChild(Statusleiste.Button[5])
Statusleiste.Zeile.appendChild(Statusleiste.Button[6])
Statusleiste.Zeile.appendChild(Statusleiste.Button[7])
Statusleiste.Zeile.appendChild(Statusleiste.Button[8])
Statusleiste.Zeile.appendChild(Statusleiste.Button[9])
Statusleiste.Zeile.appendChild(Statusleiste.Button[10])
Statusleiste.Zeile.appendChild(Statusleiste.Button[11])
Statusleiste.Zeile.appendChild(Statusleiste.Button[12])
Statusleiste.Tabelle.appendChild(Statusleiste.Zeile)
// Bausteine DOM
Bausteine.ButtonIndex = 1
while (Bausteine.ButtonIndex <= 8) {
    Bausteine.Zeile.appendChild(Bausteine.Button[Bausteine.ButtonIndex])
    
    Bausteine.ButtonIndex = Bausteine.ButtonIndex + 1
}
Bausteine.Tabelle.appendChild(Bausteine.Zeile)
// Alle Module in den Body
document.body.appendChild(Statusleiste.Tabelle)
document.body.appendChild(Uhrzeit.Tabelle)
document.body.appendChild(Textarea)
document.body.appendChild(Bausteine.Tabelle)
// ────────────────────────────────────────────────
// Einfache Text-Einfüge-Funktion
// ────────────────────────────────────────────────
function insertText(text) {
    Textarea.StartPos = Textarea.selectionStart
    
    Textarea.EndPos = Textarea.selectionEnd
    
    Textarea.value = 
        Textarea.value.substring(0, Textarea.StartPos) + 
        text + 
        Textarea.value.substring(Textarea.EndPos)
    
    Textarea.selectionStart = Textarea.selectionEnd = Textarea.StartPos + text.length
    
    Textarea.focus()
    
    Textarea.scrollTop = Textarea.scrollHeight
}
// ────────────────────────────────────────────────
// Klick-Handler
// ────────────────────────────────────────────────
Uhrzeit.Button[1].onclick = function() { insertText(Uhrzeit.Button[1].textContent) }
Uhrzeit.Button[2].onclick = function() { insertText(Uhrzeit.Button[2].textContent) }
Uhrzeit.Button[3].onclick = function() { insertText(Uhrzeit.Button[3].textContent) }
Uhrzeit.Button[4].onclick = function() { insertText(Uhrzeit.Button[4].textContent) }
Statusleiste.Button[1].onclick  = function() { insertText("Bildschirmbreite") }
Statusleiste.Button[2].onclick  = function() { insertText(Statusleiste.Button[2].textContent) }
Statusleiste.Button[3].onclick  = function() { insertText("Uhrzeit.Breite") }
Statusleiste.Button[4].onclick  = function() { insertText(Statusleiste.Button[4].textContent) }
Statusleiste.Button[5].onclick  = function() { insertText("Uhrzeit.Hoehe") }
Statusleiste.Button[6].onclick  = function() { insertText(Statusleiste.Button[6].textContent) }
Statusleiste.Button[7].onclick  = function() { insertText("Statusleiste.Breite") }
Statusleiste.Button[8].onclick  = function() { insertText(Statusleiste.Button[8].textContent) }
Statusleiste.Button[9].onclick  = function() { insertText("Statusleiste.Hoehe") }
Statusleiste.Button[10].onclick = function() { insertText(Statusleiste.Button[10].textContent) }
Statusleiste.Button[11].onclick = function() { insertText("Bildschirmhoehe") }
Statusleiste.Button[12].onclick = function() { insertText(Statusleiste.Button[12].textContent) }
// Bausteine – alle mit maximal luftiger Variante E
Bausteine.Button[1].onclick = function() { 
  insertText(
"NeueTabelle = {}\n\n" +
"    NeueTabelle.Tabelle = document.createElement(\"table\")\n\n" +
"    NeueTabelle.Tabelle.style.position = \"relative\"\n\n" +
"    NeueTabelle.Tabelle.style.margin = \"20px auto\"\n\n" +
"    NeueTabelle.Tabelle.style.borderCollapse = \"collapse\"\n\n" +
"    NeueTabelle.Tabelle.style.border = \"1px solid #888\"\n\n" +
"    NeueTabelle.Tabelle.style.backgroundColor = \"#ffffff\"\n\n" +
"document.body.appendChild(NeueTabelle.Tabelle)\n"
  ) 
}
Bausteine.Button[2].onclick = function() { 
  insertText(
"NeuerButton = document.createElement(\"button\")\n\n" +
"    NeuerButton.textContent = \"Neuer Button\"\n\n" +
"    NeuerButton.style.width = \"165px\"\n\n" +
"    NeuerButton.style.height = \"32px\"\n\n" +
"    NeuerButton.style.border = \"1px solid #888\"\n\n" +
"    NeuerButton.style.margin = \"8px\"\n\n" +
"    NeuerButton.style.padding = \"0 4px\"\n\n" +
"    NeuerButton.style.fontSize = \"18px\"\n\n" +
"    NeuerButton.style.backgroundColor = \"#ffffff\"\n\n" +
"    NeuerButton.style.color = \"#222\"\n\n" +
"    NeuerButton.style.cursor = \"pointer\"\n\n" +
"    NeuerButton.style.textAlign = \"center\"\n\n" +
"    NeuerButton.style.lineHeight = \"1.3\"\n\n" +
"    NeuerButton.style.borderRadius = \"3px\"\n\n" +
"    NeuerButton.style.boxShadow = \"inset 0 1px 2px rgba(0,0,0,0.08)\"\n\n" +
"document.body.appendChild(NeuerButton)\n"
  ) 
}
Bausteine.Button[3].onclick = function() { 
  insertText(
"NeuesLabel = document.createElement(\"div\")\n\n" +
"    NeuesLabel.textContent = \"Überschrift oder Beschreibung\"\n\n" +
"    NeuesLabel.style.fontSize = \"18px\"\n\n" +
"    NeuesLabel.style.margin = \"15px 0\"\n\n" +
"    NeuesLabel.style.fontWeight = \"bold\"\n\n" +
"    NeuesLabel.style.color = \"#222\"\n\n" +
"document.body.appendChild(NeuesLabel)\n"
  ) 
}
Bausteine.Button[4].onclick = function() { 
  insertText(
"NeueTextarea = document.createElement(\"textarea\")\n\n" +
"    NeueTextarea.placeholder = \"Hier Text eingeben ...\"\n\n" +
"    NeueTextarea.style.fontFamily = \"monospace\"\n\n" +
"    NeueTextarea.style.fontSize = \"18px\"\n\n" +
"    NeueTextarea.style.width = \"90%\"\n\n" +
"    NeueTextarea.style.maxWidth = \"900px\"\n\n" +
"    NeueTextarea.style.height = \"180px\"\n\n" +
"    NeueTextarea.style.margin = \"20px auto\"\n\n" +
"    NeueTextarea.style.display = \"block\"\n\n" +
"    NeueTextarea.style.padding = \"12px\"\n\n" +
"    NeueTextarea.style.border = \"1px solid #aaa\"\n\n" +
"    NeueTextarea.style.borderRadius = \"6px\"\n\n" +
"    NeueTextarea.style.resize = \"vertical\"\n\n" +
"document.body.appendChild(NeueTextarea)\n"
  ) 
}
Bausteine.Button[5].onclick = function() { 
  insertText(
"NeueStatusleiste = {}\n\n" +
"    NeueStatusleiste.Div = document.createElement(\"div\")\n\n" +
"    NeueStatusleiste.Div.textContent = \"Status: Breite = \" + window.innerWidth\n\n" +
"    NeueStatusleiste.Div.style.position = \"fixed\"\n\n" +
"    NeueStatusleiste.Div.style.bottom = \"10px\"\n\n" +
"    NeueStatusleiste.Div.style.left = \"10px\"\n\n" +
"    NeueStatusleiste.Div.style.backgroundColor = \"#f0f0f0\"\n\n" +
"    NeueStatusleiste.Div.style.padding = \"8px 12px\"\n\n" +
"    NeueStatusleiste.Div.style.border = \"1px solid #ccc\"\n\n" +
"    NeueStatusleiste.Div.style.borderRadius = \"4px\"\n\n" +
"document.body.appendChild(NeueStatusleiste.Div)\n"
  ) 
}
Bausteine.Button[6].onclick = function() { 
  insertText(
"LiveUhrzeit = {}\n\n" +
"    LiveUhrzeit.Tabelle = document.createElement(\"table\")\n\n" +
"    LiveUhrzeit.Tabelle.style.position = \"absolute\"\n\n" +
"    LiveUhrzeit.Tabelle.style.top = \"200px\"\n\n" +
"    LiveUhrzeit.Tabelle.style.right = \"20px\"\n\n" +
"    LiveUhrzeit.Tabelle.style.zIndex = \"90\"\n\n" +
"    LiveUhrzeit.Tabelle.style.borderCollapse = \"collapse\"\n\n" +
"    LiveUhrzeit.Tabelle.style.backgroundColor = \"#f8f8f8\"\n\n" +
"    LiveUhrzeit.Tabelle.style.boxShadow = \"0 2px 8px rgba(0,0,0,0.15)\"\n\n" +
"    LiveUhrzeit.Zeile = []\n\n" +
"    LiveUhrzeit.Zeile[1] = document.createElement(\"tr\")\n\n" +
"    LiveUhrzeit.Zeile[2] = document.createElement(\"tr\")\n\n" +
"    LiveUhrzeit.Zeile[3] = document.createElement(\"tr\")\n\n" +
"    LiveUhrzeit.Zeile[4] = document.createElement(\"tr\")\n\n" +
"    LiveUhrzeit.Button = []\n\n" +
"    LiveUhrzeit.Button[1] = document.createElement(\"button\")\n\n" +
"    LiveUhrzeit.Button[2] = document.createElement(\"button\")\n\n" +
"    LiveUhrzeit.Button[3] = document.createElement(\"button\")\n\n" +
"    LiveUhrzeit.Button[4] = document.createElement(\"button\")\n\n" +
"    LiveUhrzeit.ButtonIndex = 1\n\n" +
"    while (LiveUhrzeit.ButtonIndex <= 4) {\n\n" +
"      LiveUhrzeit.AktuellerButton = LiveUhrzeit.Button[LiveUhrzeit.ButtonIndex]\n\n" +
"      LiveUhrzeit.AktuellerButton.style.width = \"165px\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.height = \"32px\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.border = \"1px solid #888\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.margin = \"0\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.padding = \"0 4px\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.fontSize = \"18px\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.backgroundColor = \"#fff\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.color = \"#222\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.cursor = \"pointer\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.textAlign = \"center\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.lineHeight = \"1.3\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.borderRadius = \"3px\"\n\n" +
"      LiveUhrzeit.AktuellerButton.style.boxShadow = \"inset 0 1px 2px rgba(0,0,0,0.08)\"\n\n" +
"      LiveUhrzeit.ButtonIndex = LiveUhrzeit.ButtonIndex + 1\n\n" +
"    }\n\n" +
"    function LiveUhrzeitUndDatumAktualisieren() {\n\n" +
"      LiveUhrzeit.Jetzt = new Date()\n\n" +
"      LiveUhrzeit.StundeZahl = LiveUhrzeit.Jetzt.getHours().toString().padStart(2, \"0\")\n\n" +
"      LiveUhrzeit.MinuteZahl = LiveUhrzeit.Jetzt.getMinutes().toString().padStart(2, \"0\")\n\n" +
"      LiveUhrzeit.SekundeZahl = LiveUhrzeit.Jetzt.getSeconds().toString().padStart(2, \"0\")\n\n" +
"      LiveUhrzeit.UhrzeitString = LiveUhrzeit.StundeZahl + \":\" + LiveUhrzeit.MinuteZahl + \":\" + LiveUhrzeit.SekundeZahl\n\n" +
"      LiveUhrzeit.Button[4].textContent = LiveUhrzeit.UhrzeitString\n\n" +
"    }\n\n" +
"    setInterval(LiveUhrzeitUndDatumAktualisieren, 1000)\n\n" +
"    LiveUhrzeitUndDatumAktualisieren()\n\n" +
"    LiveUhrzeit.Zeile[1].appendChild(LiveUhrzeit.Button[1])\n\n" +
"    LiveUhrzeit.Zeile[2].appendChild(LiveUhrzeit.Button[2])\n\n" +
"    LiveUhrzeit.Zeile[3].appendChild(LiveUhrzeit.Button[3])\n\n" +
"    LiveUhrzeit.Zeile[4].appendChild(LiveUhrzeit.Button[4])\n\n" +
"    LiveUhrzeit.Tabelle.appendChild(LiveUhrzeit.Zeile[1])\n\n" +
"    LiveUhrzeit.Tabelle.appendChild(LiveUhrzeit.Zeile[2])\n\n" +
"    LiveUhrzeit.Tabelle.appendChild(LiveUhrzeit.Zeile[3])\n\n" +
"    LiveUhrzeit.Tabelle.appendChild(LiveUhrzeit.Zeile[4])\n\n" +
"    document.body.appendChild(LiveUhrzeit.Tabelle)\n"
  ) 
}
Bausteine.Button[7].onclick = function() { 
  insertText("AbstandElement = document.createElement(\"div\")\n\n" +
             "    AbstandElement.style.height = \"60px\"\n\n" +
             "document.body.appendChild(AbstandElement)\n") 
}
Bausteine.Button[8].onclick = function() { 
  insertText("// ========================================================\n" +
             "//   Neuer Code-Abschnitt – " + new Date().toLocaleString() + "\n" +
             "// ========================================================\n\n") 
}
// ────────────────────────────────────────────────
// Aktualisierungs-Funktionen
// ────────────────────────────────────────────────
function UhrzeitUndDatumAktualisieren() {
    Uhrzeit.Jetzt = new Date()
    Uhrzeit.WochentageArray = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"]
    
    Uhrzeit.WochentagNummerRaw = Uhrzeit.Jetzt.getDay()
    
    Uhrzeit.WochentagNummer = Uhrzeit.WochentagNummerRaw === 0 ? 7 : Uhrzeit.WochentagNummerRaw
    
    Uhrzeit.WochentagName = Uhrzeit.WochentageArray[Uhrzeit.WochentagNummerRaw]
    Uhrzeit.MonateArray = ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"]
    
    Uhrzeit.MonatNummer = Uhrzeit.Jetzt.getMonth() + 1
    
    Uhrzeit.MonatName = Uhrzeit.MonateArray[Uhrzeit.Jetzt.getMonth()]
    Uhrzeit.TagZahl = Uhrzeit.Jetzt.getDate().toString().padStart(2, "0")
    
    Uhrzeit.MonatZahl = Uhrzeit.MonatNummer.toString().padStart(2, "0")
    
    Uhrzeit.JahrZahl = Uhrzeit.Jetzt.getFullYear()
    
    Uhrzeit.DatumString = Uhrzeit.TagZahl + "." + Uhrzeit.MonatZahl + "." + Uhrzeit.JahrZahl
    Uhrzeit.StundeZahl = Uhrzeit.Jetzt.getHours().toString().padStart(2, "0")
    
    Uhrzeit.MinuteZahl = Uhrzeit.Jetzt.getMinutes().toString().padStart(2, "0")
    
    Uhrzeit.SekundeZahl = Uhrzeit.Jetzt.getSeconds().toString().padStart(2, "0")
    
    Uhrzeit.UhrzeitString = Uhrzeit.StundeZahl + ":" + Uhrzeit.MinuteZahl + ":" + Uhrzeit.SekundeZahl
    Uhrzeit.Button[1].textContent = Uhrzeit.WochentagNummer + ", " + Uhrzeit.WochentagName
    
    Uhrzeit.Button[2].textContent = Uhrzeit.MonatNummer + ", " + Uhrzeit.MonatName
    
    Uhrzeit.Button[3].textContent = Uhrzeit.DatumString
    
    Uhrzeit.Button[4].textContent = Uhrzeit.UhrzeitString
    StatusleisteUndDimensionenAktualisieren()
}
function StatusleisteUndDimensionenAktualisieren() {
    Statusleiste.BildschirmBreite = window.innerWidth
    
    Statusleiste.BildschirmHoehe = window.innerHeight
    
    Statusleiste.UhrzeitBreite    = Uhrzeit.Tabelle.offsetWidth
    
    Statusleiste.UhrzeitHoehe     = Uhrzeit.Tabelle.offsetHeight
    Statusleiste.Breite = Statusleiste.BildschirmBreite - Statusleiste.UhrzeitBreite
    
    Statusleiste.Tabelle.style.width = (window.innerWidth - Uhrzeit.Tabelle.offsetWidth) + "px";
    
    Statusleiste.Hoehe  = Statusleiste.Tabelle.offsetHeight;
    
    if (Statusleiste.Hoehe < Statusleiste.UhrzeitHoehe) {
      
    Textarea.style.top = Statusleiste.UhrzeitHoehe + "px";}
    
    else {
      
    Textarea.style.top = Statusleiste.Hoehe + "px";}
    
    Textarea.Breite = Statusleiste.BildschirmBreite;
    
    Textarea.style.width = Textarea.Breite + "px";
    
    Textarea.Hoehe = Textarea.offsetHeight;
    
    Bausteine.Tabelle.style.top = (Textarea.offsetTop + Textarea.Hoehe) + "px";
    
    Statusleiste.Button[2].textContent  = Statusleiste.BildschirmBreite
    
    Statusleiste.Button[4].textContent  = Statusleiste.UhrzeitBreite
    
    Statusleiste.Button[6].textContent  = Statusleiste.UhrzeitHoehe
    
    Statusleiste.Button[8].textContent  = Statusleiste.Breite
    
    Statusleiste.Button[10].textContent = Statusleiste.Hoehe
    
    Statusleiste.Button[12].textContent = Statusleiste.BildschirmHoehe
}
// Start
setInterval(UhrzeitUndDatumAktualisieren, 1000)
window.addEventListener('resize', StatusleisteUndDimensionenAktualisieren)
UhrzeitUndDatumAktualisieren()
</script>

</body>
</html>"

Usane · April 1, 2026, 8:42am

Now it shows correctly.

Thank you.

Gunnar_Scott_Freiher · April 9, 2026, 7:03pm

Then, now you understand what I want to make?

Usane · April 11, 2026, 6:43am

Yes. I can see the button pattern now.

Gunnar_Scott_Freiher · April 12, 2026, 12:35am

Wonderful, now we have it finally.

No we can work in the next problem:

How we can order it like so, that we have it's arranged in or by pares, like it is oranged in the designer part like: Screen height (first the label, and then the value) (and so on)?

Thanks in advance

Scott

Usane · April 12, 2026, 9:01am

Well, we are back where we started. If you want to keep a proper order

you have to add them manually to the list,
you have to make/modify them in the orther you would like them to be ordered, but the moment you modify one of them the order will change.
If you want to arrange them in pairs you might use dictionaries, but can be done only their ID in the list if you put them in in order.

Gunnar_Scott_Freiher · April 12, 2026, 8:09pm

And what about to give them numbers? For example: scrhl1, or 1scrhl? Or something like this…