Javascript - Uncaught SyntaxError: illegal character U+283B

[Rolf B]

Hallo Jörg,

Braille-Schrift ist Blindenschrift, die vom Leser ertastet wird. Aber Unicode enthält trotzdem Zeichen für die Braille-Symbole. Vermutlich braucht man einen Spezialdrucker, um sie einem Blinden zugänglich machen zu können 😉

Den Syntaxfehler mit dem illegalen U+283B bekomme ich nicht, wenn ich deinen Code in einer Datei speichere und im Browser aufrufe.

Aber bitte beachte, dass // kein Kommentar in CSS ist. Das ist zwar nicht der Grund für den illegal character, aber es kann zu anderen Folgefehlern führen.

Richtig ist:

.in_text {
 /*
   border-style: none;
 */
   border: solid 0px black;
}

Wobei eine border-width von 0 den Rand beseitigt. Bist Du sicher, dass Du die Wurf-Eingabefelder auf diese Weise unkenntlich machen möchtest?

Auf das Table-Layout gehe ich jetzt nicht ein, wenn ich Dir alles auflisten würde, was man seit 2000 nicht mehr tut…

Hinweis: Grid-Layout. Table-Elemente verwendet man, wenn man tabellarische Daten darstellen will. Nicht jedes Raster ist eine Tabelle.

Es ist auch nicht unbedingt schlau, jedem input-Element in der letzten Zeile die out-Klasse zu geben. Das Ganze befindet sich in einem Container (bei Dir: tr) und jedes input-Element in diesem Container soll diesen Stil bekommen. Das bessere Vorgehen ist dann, dem Container eine Klasse oder eine ID zu geben und im Stylesheet mit Kombinatoren zu arbeiten. Um mal bei deinem HTML zu bleiben: Wenn Du dem tr Element, wo die ganzen .out-Inputs drin sind, die Klasse out-row gibst (aber vielleicht gibt's auch einen zum Bowling besser passenden Namen?), dann kannst Du im Stylesheet schreiben:

.out-row input {
 ...
}

und Styles für diese .out „Eingaben“ (die ja eigentlich Ausgaben sind und darum vielleicht <output> sein sollten oder zumindest readonly) setzen.

Genauso ist das mit den 10 Spalten für die Würfe. Da gibst Du jeder Unter-Table die Klasse tab_frame (besser wäre vermutlich wurfwerte oder so) und markierst dann jedes Element, das Du stylen willst, mit weiteren Klassen. Aber mit Kombinatoren geht das einfacher:

.tab_frame th {
   text-align:center;  
   border-width: 14px;
}
.tab_frame tr:nth-of-type(2) input {
   /* Inhalt von .in_text */
}
.tab_frame tr:nth-of-type(3) input {
   /* Inhalt von .in_text2 */
}

Wobei da einiges anzumerken ist

• text-align:center ist der Default für th Elemente
• Fettschrift ist ebenfalls Default, aber wenn Du die erzwingen willst, dann setze für das th Element font-weight:bold und verwende kein strong-Element
• Die Breite von input-Elementen sollte man im CSS mit width setzen, nicht mit dem size-Attribut.
• Jedes input-Element benötigt zwingend eine zugängliche Beschreibung. Diese kommt entweder über ein label-Element, dessen for-Attribut auf das input-Element verweist, oder das input-Element verweist mittels aria-labelledby auf eine Beschreibung, oder, wenn es gar nicht anders geht, baust Du die Beschreibung mittels aria-label Attribut direkt an das input-Element. Bei den Wurfwert-Eingaben würde ich aria-label verwenden, um das Markup nicht mit Labels vollzumüllen. Eine ID brauchen die inputs dann auch nicht.
• Die IDs auf den inputs sind vermutlich dafür gedacht, die input-Elemente gezielt aufsuchen zu können. Das muss aber nicht unbedingt mit einem Schwarm von IDs geschehen. Die querySelector Methode ermöglicht es Dir, Elemente mit CSS Selektoren aufzusuchen.

Aber man müsste schon das ganze HTML erneuern, um vom Table Layout wegzukommen, bevor man sich damit näher auseinander setzt.

Rolf