Einem neu erzeugtem Button eine bestimmte Position zuweisen

[Rolf B]

Hallo Lars,

gut, dann mal hier ein paar Tipps basierend auf deinem Code.

• 13 Radiobuttons für eine Wertauswahl sind keine gute Idee. Nimm statt dessen

  • ein Eingabefeld input type="number" (das liefert Dir Up/Down-Buttons)
  • ein input type="range". Beim range-Input brauchst Du ggf. noch einen Handler für das input-Event, der Dir den aktuellen Wert im Klartext anzeigt, das tut das range-Control nicht von allein.
  • ein select Element

• Um aus 13 Radiobuttons den herauszufischen, der selektiert ist, brauchst Du nicht jeden einzeln anzufassen. Verwende die :checked-Pseudoklasse, um den markierten zu finden. Aber - wenn Du auf die Horde von Radiobuttons verzichtest, stellt sich das Problem gar nicht.

   let selectedRadio = document.querySelector("input[name=anzahlDerKreise]:checked");
   return selectedRadio ? selectedRadio.valueAsNumber : 0;

Den Operator ?: kennst Du?

• Deine Funktion posCalculate gibt die berechnete Position zurück. Du übernimmst sie beim Aufruf aber nicht, sondern verwendest eine Objekteigenschaft, in der die Position „zwischengeparkt“ wird. Das ist - sorry - bäh. Um erstmal nicht zu weit von deinem Code abzuweichen - das ginge so besser:

posCalculate(degree) {
   let result;            // lokale Variable statt this-Eigenschaft
   ...
   result = {             // Position als Objektliteral erzeugen und zuweisen
      x: ...;             // Aber einfach nur x und y verwenden
      y: ...;
   };
   ...
   return position;
}

kleine_flaechen_erzeugen_positionieren() {
   ...
   let position = posCalculate(degree);
   button.style.left = `${position.x}px`;
   button.style.top  = `${position.y}px`;
   ...
}

Es ist zu viel Schreibarbeit, die Eigenschaften x_position und y_position zu nennen. Das Objekt stellt eine Position dar, also einfach nur x und y. Bei der Zuweisung an style.left und style.top hattest Du zu viel alten Kram stehen gelassen. Wenn Du `${foo} + px` schreibst, wird + px genau so ins Ergebnis gestellt. In einem Template-String (also dieses Ding in Backticks) wird eine ${...} Gruppe unmittelbar durch ihren Wert ersetzt. Ein + ist nicht mehr nötig. Ein .toString() auch nicht, das Ergebnis ist bereits ein String.

Ansonsten passieren da einige merkwürdige Dinge, die ich nicht verstehe. Vor allem nicht die Abfrage auf den Winkelquadranten in posCalculate, sowas sollte komplett überflüssig sein. Ich bastele das jetzt aber nicht irgendwie hin, bislang sind da noch zu viele sonstige Fehler.

Rolf