Is there any way to making button list without dragging?

Gunnar_Scott_Freiher · March 22, 2026, 9:04pm

Hello Usane, I will send you now a file, it is in HTML format, and there you will see and understand what I want to code or program or develope:

<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>"