Jörg: Javascript - Uncaught SyntaxError: illegal character U+283B

Hallo Zusammen,

eine einfache Seite in HTML und Javasript.

folgenedes Script steht im Header:

<script type="text/javascript">

function wurf(elem) {
   var input = elem.id;
   if(document.getElementById("out011").value == "") {
      alert("Hallo");
   }
}
</script>

der Aufruf wird mit einem Button getätigt

<input class="btn" type="button" id="0" onclick="wurf(this)" value="0" />

die Abfrage ist dann

<input value="" size="2" class="out" name="out011" id="out011" type="text" />

wenn ich dann einen Debugger aufrufe bekomme ich die Ausgabe 'Uncaught SyntaxError: illegal character U+283B'

der JS-alert wird aber aus geführt.

Wie bekomme ich den SyntaxError weg, wo ist der Fehler?????

Gruß Jörg

  1. Hallo Jörg,

    Wie bekomme ich den SyntaxError weg, wo ist der Fehler?????

    Nicht in dem Teil, den Du uns zeigst.

    U+283B ist ein Braille Zeichen: ⠻ (er)

    Beabsichtigst Du, mit diesen Zeichen Würfel darzustellen (wenn ich eine Funktion "wurf" sehe, dann kommt mir das plausibel vor)? Dafür gibt's bessere Zeichen: U+2680 bis U+2685 (⚀⚁⚂⚃⚄⚅).

    Wenn Du das Braille-Zeichen irgendwo bei Dir im Code stehen hast, suche den Fehler dort. Vielleicht hast Du dort ein Anführungszeichen vergessen.

    Andernfalls stelle die Seite online und gib uns die URL, dann kann man genauer schauen.

    Dein Eventhandling solltest Du aber generell überarbeiten, es gilt heute als schlechter Stil, mit on-Attributen zu arbeiten. Verwende addEventListener, um Eventhandler zu registrieren. Unser Wiki hat einen Einführungsartikel zur Eventverarbeitung und einen spezielleren Artikel zu addEventListener, dort steht einiges dazu. Ich hoffe, es ist nicht zu kompliziert geschrieben.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Danke für die Schnelle Antwort.

      ich weiß nicht was eine Braille Zeichen ist. ich erfasse mit der Seite den Bowling-Score von einer WII-Switch. Bei der WII-U gab eine Leistungskurve mit Statistik, nach dem die U den Geist aufgegeben hat, baue ich das für die Switch in HTML nach.

      😀

      leider habe ich keine öffendliche Seite und der Quelltext ist einfach zu lang. Kann man die html-Seite in z.b. png umbenenne damit sie als Bild ablegen kann?

      1. <!doctype html>
        <html lang="de">
        	<head>
            <meta charset="UTF-8">
        	<link rel="icon" type="favicon.png" href="favicon.png">
            <title>Bowling</title>
        		<title>Bowling Ergebnis</title>
        		<style type="text/css">
        			.out:focus {
        				background-color: #FFFF00;
        			}
        			.tab_frame {
        				border-style: none;
        				border-color: inherit;
        				border-width: 0px;
        				cellpadding: 0px;
        				cellspacing: 0px;
        				background-image: url("frame.png");
        			}
        			.tab_letzte {
        				border-style: none;
        				border-color: inherit;
        				border-width: 0px;
        				cellpadding: 0px;
        				cellspacing: 0px;
        				background-image: url("frame_10.png");
        
        			}
        			.head_innen {
        				text-align: center;
        				border-width: 14px;
        			}
        			.player {
        				box-shadow:inset 0px 1px 0px 0px #cf866c;
        				background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
        				background-color:#d0451b;
        				border-radius:3px;
        				border:1px solid #942911;
        				display:inline-block;
        				cursor:pointer;
        				color:#ffffff;
        				font-family:Arial;
        				font-size:13px;
        				padding:6px 24px;
        				text-decoration:none;
        				text-shadow:0px 1px 0px #854629;
        			}
        			.player:hover {
        				background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
        				background-color:#bc3315;
        			}
        			.player:active {
        				position:relative;
        				top:1px;
        			}
        			.in_text {
        				//border-style: none;
        				//border-color: inherit;
        				//border-width: 1px;
        				border: solid 0px black;
        				margin-left: 1px;
        				font-size: 14pt;
        				text-align: center;
        				width: 30px;
        			}
        			.in_text2 {
        				//border-style: none;
        				//border-color: inherit;
        				//border-width: 1px;
        				border: solid 0px black;
        				margin-left: 1px;
        				font-size: 14pt;
        				text-align: center;
        				width: 60px;
        			}
        			.spieler {
        				margin-bottom: 10;
        				font-weight: 600;
        				font-size: 18px;
        			}
        			.btn {
        				display: inline-block;
        				margin-bottom: 0;
        				font-weight: 600;
        				text-align: center;
        				vertical-align: middle;
        				cursor: pointer;
        				background-image: none;
        				border: 1px solid black;
        				white-space: nowrap;
        				padding: 12px 26px;
        				font-size: 18px;
        				border-radius: 4px;
        				-webkit-user-select: none;
        				-moz-user-select: none;
        				-ms-user-select: none;
        				user-select: none;
        			}
        		</style>
        	<!-- 
        		a = 10		Anzeige a : X | b : 		(Strike)
        		a + b = 10	Anzeige a : 9 | b : /		(Spare)
        		a + b = 10	Anzeige a : - | b : /		(Spare)
        		a + b < 10	Anzeige a : 7 | b : 2
        		a + b < 10	Anzeige a : - | b : 7	
        	-->
        
        		<script type="text/javascript">
        
        			function wurf(elem) {
        				var input = elem.id;
        			// 1.Frame
        				if(document.getElementById("out011").value == "") {
        					alert("Hallo");
        				}
        			}
        			
        			
        
        
        </script>
        	</head>
        	<body>
        		<h2>Klicke auf die Anzahl der Pins</h2>
        		<p>
        			<input class="btn" type="button" id="0" onclick="wurf(this)" value="0" />
        			<input class="btn" type="button" id="1" onclick="wurf(this)" value="1" />
        			<input class="btn" type="button" id="2" onclick="wurf(this)" value="2" />
        			<input class="btn" type="button" id="3" onclick="wurf(this)" value="3" />
        			<input class="btn" type="button" id="4" onclick="wurf(this)" value="4" />
        			<input class="btn" type="button" id="5" onclick="wurf(this)" value="5" />
        			<input class="btn" type="button" id="6" onclick="wurf(this)" value="6" />
        			<input class="btn" type="button" id="7" onclick="wurf(this)" value="7" />
        			<input class="btn" type="button" id="8" onclick="wurf(this)" value="8" />
        			<input class="btn" type="button" id="9" onclick="wurf(this)" value="9" />
        			<input class="btn" type="button" id="10" onclick="wurf(this)" value="10" />
        		</p>
        		<form method="POST" action="neu.html">
        			<table cellpadding="0" cellspacing="0" style="border:0px;">
        				<tr><td colspan="21"><p class="spieler">1. Spieler <input name="spieler1" size="12" class="out" /></p></td></tr>
        				<tr>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>1</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz011" value="" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz012" value="" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text2" name="out013" id="out013" value="" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>2</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz041" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz042" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out043" id="out043" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>3</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz071" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz072" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out073" id="out073" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>4</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz101" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz102" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out103" id="out103" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>5</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz131" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz132" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out133" id="out133" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>6</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz161" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz162" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out163" id="out163" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>7</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz191" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz192" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out193" id="out193" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>8</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz221" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz222" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out223" id="out223" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="2">
        						<table style=" width:99px;height:102px;" class="tab_frame">
        							<tr><th colspan="2" class="head_innen" valign="top"><strong>9</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz251" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz252" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out253" id="out253" value="" size="3" /></td></tr>
        						</table>
        					</td>
        					<td colspan="3">
        						<table style=" width:99px;height:102px;" class="tab_letzte">
        							<tr><th colspan="3" class="head_innen" valign="top"><strong>10</strong></th></tr>
        							<tr>
        								<td align="center" valign="top"><input class="in_text" id="anz281" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz282" value="" size="1" /></td>
        								<td align="center" valign="top"><input class="in_text" id="anz282" value="" size="1" /></td>
        							</tr>
        							<tr><td align="center" valign="center" colspan="2"><input class="in_text" name="out284" id="out284" value="" size="3" /></td></tr>
        						</table>
        					</td>
        				</tr>
        				<tr>
        					<td><input value="" size="2" class="out" name="out011" id="out011" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out012" id="out012" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out041" id="out041" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out042" id="out042" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out071" id="out071" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out072" id="out072" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out101" id="out101" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out102" id="out102" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out131" id="out131" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out132" id="out132" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out161" id="out161" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out162" id="out162" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out191" id="out191" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out192" id="out192" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out221" id="out221" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out222" id="out222" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out251" id="out251" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out252" id="out252" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out281" id="out281" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out282" id="out282" type="text" /></td>
        					<td><input value="" size="2" class="out" name="out283" id="out283" type="text" /></td>
        				</tr>
        			</table>
        			<br>
        
        		</form>
        	</body>
        </html>
        
      2. 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

        --
        sumpsi - posui - obstruxi
        1. Hi,

          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 😉

          oder der Blinde hat ein Ausgabegerät dafür (Braille-Zeile)

          cu,
          Andreas a/k/a MudGuard

        2. Vielen Dank Rolf,

          ich weiß das das was du machst,ist super schwer. Wenn die Seite im Chrome aufrufe ist sie auch Fehlerfrei. Nur der Fierefox meldet den Error????

          Das stimmt, meine letzte Weiterbildung Javascript war 2002. Ich habe mit on-Attributen gelernt. Zum Glück habe ich mich nicht für einen Style-Wettbewerb gemeldet.😜

          Deswegen poste ich auch noch mal den Code mit 2 Würfen im ersten Frame für einen Spieler. Im Scriptteil gibt es 3 Funktionen. Den eigentlichen Wurf, der mit der Anzahl der Pins quitiert wird und die Unterscheidung 1. oder 2. Wurf.

          Demnach gib es 4 Spieler mit je 12 Würfen (oder weniger) in 10 Frames.

          Edit Rolf B: Code mit ~~~html, nicht ` markieren

          <!doctype html>
          <html lang="de">
          	<head>
              <meta charset="UTF-8">
          	<link rel="icon" type="favicon.png" href="favicon.png">
              <title>Bowling</title>
          		<title>Bowling Ergebnis</title>
          		<style type="text/css">
          			.tab_ueber {
          				border: 0px;
          			}
          			.tab_frame {
          				border-style: none;
          				border-color: inherit;
          				border-width: 0px;
          				cellpadding: 0px;
          				cellspacing: 0px;
          				background-image: url("frame.png");
          				width: 99px;
          				height:102px;
          			}
          			.tab_letzte {
          				border-style: none;
          				border-color: inherit;
          				border-width: 0px;
          				cellpadding: 0px;
          				cellspacing: 0px;
          				background-image: url("frame_10.png");
          
          			}
          			.head_innen {
          				text-align: center;
          				border-width: 14px;
          			}
          			.player {
          				box-shadow:inset 0px 1px 0px 0px #cf866c;
          				background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
          				background-color:#d0451b;
          				border-radius:3px;
          				border:1px solid #942911;
          				display:inline-block;
          				cursor:pointer;
          				color:#ffffff;
          				font-family:Arial;
          				font-size:13px;
          				padding:6px 24px;
          				text-decoration:none;
          				text-shadow:0px 1px 0px #854629;
          			}
          			.player:hover {
          				background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
          				background-color:#bc3315;
          			}
          			.player:active {
          				position:relative;
          				top:1px;
          			}
          			.in_text {
          				border: solid 0px black;
          				margin-left: 1px;
          				font-size: 14pt;
          				text-align: center;
          				width: 30px;
          			}
          			.in_text2 {
          				border: solid 0px black;
          				margin-left: 1px;
          				font-size: 14pt;
          				text-align: center;
          				width: 60px;
          			}
          			.out {
          				width: 30px;
          			}
          			.spieler {
          				margin-bottom: 10;
          				font-weight: 600;
          				font-size: 18px;
          			}
          			.btn {
          				display: inline-block;
          				margin-bottom: 0;
          				font-weight: 600;
          				text-align: center;
          				vertical-align: middle;
          				cursor: pointer;
          				background-image: none;
          				border: 1px solid black;
          				white-space: nowrap;
          				padding: 12px 26px;
          				font-size: 18px;
          				border-radius: 4px;
          				-webkit-user-select: none;
          				-moz-user-select: none;
          				-ms-user-select: none;
          				user-select: none;
          			}
          		</style>
          	<!-- 
          		a = 10		Anzeige a : X | b : 		(Strike)
          		a + b = 10	Anzeige a : 9 | b : /		(Spare)
          		a + b = 10	Anzeige a : - | b : /		(Spare)
          		a + b < 10	Anzeige a : 7 | b : 2
          		a + b < 10	Anzeige a : - | b : 7	
          	-->
          
          		<script type="text/javascript">
          
          			function wurf(elem) {
          				var input = elem.id;
          			// 1.Frame
          				if (document.getElementById("out011").value == "" ) {
          					var wert011 = input;
          					erster_wurf('anz011','out011',wert011,'out012',0,0,'--',0,0,'--',0,0);
          				} else if (document.getElementById("out012").value == "" ) {
          					var wert011 = document.getElementById('out011').value;
          					var wert012 = input;
          					zweiter_wurf('anz012','out011',wert011,'out012',wert012,'out013',0,0,'--',0,0);
          				}
          				// Hier kommen weitere Frames mit maximal 2 Würfen
          			}
          			//**********************************************************************************************
          			// ____________ aktuelles Frame ____________|__________ 1 vor Frame ___________________|______ 2 vor Frame ____________| Summe vor
          			// 'anz101', 'out101',  'wert101', 'out102', 'wert071', 'wert072', 'out073', 'wert073', 'wert041', 'out043', 'wert043', 'wert013'
          			function erster_wurf(anz11,out11,wert11,out12,wert21,wert22,out23,wert23,wert31,out33,wert33,wert43) {
          				wert11 = parseInt(wert11);
          				wert21 = parseInt(wert21);
          				wert22 = parseInt(wert22);
          				wert23 = parseInt(wert23);
          				wert31 = parseInt(wert31);
          				wert33 = parseInt(wert33);
          				wert43 = parseInt(wert43);
          				document.getElementById(out11).value = wert11;
          				if (wert11 == 0) {
          					document.getElementById(anz11).value = "-";
          					if (wert21 == 10) {
          						if (wert31 == 10) {
          							document.getElementById(out33).value = 20+wert43;
          						}
          					} else if (wert21+wert22 == 10) {
          						document.getElementById(out23).value = 10+wert33;
          					}
          				} else if (wert11 < 10) {
          					document.getElementById(anz11).value = wert11;
          					if (wert21 == 10) {
          						if (wert31 == 10) {
          							document.getElementById(out33).value = 20+wert11+wert43;
          						}
          					} else if (wert21+wert22 == 10) {
          						document.getElementById(out23).value = 10+wert11+wert33;
          					}
          				} else {
          					document.getElementById(anz11).value = "X";
          					document.getElementById(out12).value = "0";
          					if (wert21 == 10) {
          						if (wert31 == 10) {
          							document.getElementById(out33).value = 30+wert43;
          						}
          					} else if (wert21+wert22 == 10) {
          						document.getElementById(out23).value = 20+wert43;
          					}
          				}
          			}	
          			//**********************************************************************************************
          			// ______________ aktuelles Frame ____________________|____________________ 1 vor Frame ___________________|_ Summe vor
          			// 					'anz101', 'out101',  'wert101', 'out102', 'wert102, 'out103', 'wert071', 'wert072', 'out073', 'wert073', wert043
          			function zweiter_wurf(anz12,out11,wert11,out12,wert12,out13,wert21,wert22,out23,wert23,wert33) {
          			//--------------------------------------
          				wert11 = parseInt(wert11);
          				wert12 = parseInt(wert12);
          				wert21 = parseInt(wert21);
          				wert22 = parseInt(wert22);
          				wert23 = parseInt(wert23);
          				wert33 = 0;
          			//--------------------------------------
          				if (wert11+wert12 > 10) {
          					wert12 = 10-wert11;
          				}
          				document.getElementById(out12).value = wert12; 
          				if (wert12 == 0) {
          					document.getElementById(anz12).value = "-";
          					document.getElementById(out12).value = "0";
          					if (wert21+wert22 == 10 && wert21 < 10) {
          						document.getElementById(out13).value = wert23+wert11;
          					} else {
          						document.getElementById(out13).value = wert23+wert11;
          					} // fertig
          				} else if (wert12 < 10) {
          					if (wert11+wert12 == 10) {
          						document.getElementById(anz12).value = "/";
          					} else {
          						document.getElementById(anz12).value = wert12;
          						document.getElementById(out13).value = wert23+wert11+wert12;
          					}
          				} else if (wert12 == 10) {
          					document.getElementById(anz12).value = "/";
          				}
          			}
          		</script>
          	</head>
          	<body>
          		<h2>Klicke auf die Anzahl der Pins</h2>
          		<p>
          			<input class="btn" type="button" id="0" onclick="wurf(this)" value="0" />
          			<input class="btn" type="button" id="1" onclick="wurf(this)" value="1" />
          			<input class="btn" type="button" id="2" onclick="wurf(this)" value="2" />
          			<input class="btn" type="button" id="3" onclick="wurf(this)" value="3" />
          			<input class="btn" type="button" id="4" onclick="wurf(this)" value="4" />
          			<input class="btn" type="button" id="5" onclick="wurf(this)" value="5" />
          			<input class="btn" type="button" id="6" onclick="wurf(this)" value="6" />
          			<input class="btn" type="button" id="7" onclick="wurf(this)" value="7" />
          			<input class="btn" type="button" id="8" onclick="wurf(this)" value="8" />
          			<input class="btn" type="button" id="9" onclick="wurf(this)" value="9" />
          			<input class="btn" type="button" id="10" onclick="wurf(this)" value="10" />
          		</p>
          		<form method="POST" action="neu.html">
          			<table cellpadding="0" cellspacing="0" class="tab_ueber">
          				<tr><td colspan="2"><p class="spieler">1. Spieler <input name="spieler1" size="12" class="out" /></p></td></tr>
          				<tr>
          					<td colspan="2">
          						<table class="tab_frame">
          							<tr><th colspan="2" class="head_innen" valign="top"><strong>1</strong></th></tr>
          							<tr>
          								<td align="center" valign="top"><input class="in_text" id="anz011" value="" /></td>
          								<td align="center" valign="top"><input class="in_text" id="anz012" value="" /></td>
          							</tr>
          							<tr><td align="center" valign="center" colspan="2"><input class="in_text2" name="out013" id="out013" value="" /></td></tr>
          						</table>
          					</td>
          				</tr>
          				<tr>
          					<td><input class="out" name="out011" id="out011" type="text" value="" /></td>
          					<td><input class="out" name="out012" id="out012" type="text" value="" /></td>
          				</tr>
          			</table>
          			<br />
          
          		</form>
          	</body>
          </html>
          
          1. Hallo jörg,

            Nur der Fierefox meldet den Error????

            Meiner nicht. Keine Ahnung, was bei Dir passiert.

            Blockweisen Code markiert man im Forum übrigens mit ~~~, nicht mit `. Hinter dem einleitenden ~~~ kann man noch die Sprache notieren, bei Dir also ~~~html.

            Du merkst aber jetzt schon, dass dein Code wüst wird, ja? Du musst versuchen, wiederverwendbare Einheiten zu bauen. Für jeden Frame den gleichen Code zu wiederholen endet im Wahnsinn.

            Und wieso baust Du eigentlich ein Form? Steht dahinter ein Server mit PHP oder so, auf dem Du das auswertest? Dagegen spricht eine html-URL als action im Form.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. ich drücke auf den Button "Quelltext"?

              Ich hab erst alles in HTML gescriptet als nächster Schritt baue ich JS erst wenn diese beiden Sachen stehen kommt der Submit für PHP

              aber solange ich dieses JS nicht in den Griff bekomme kann ich das ganze als .html auf dem Singel-PC test und schreiben.

              Jörg

        3. @@Rolf B

          Es ist auch nicht unbedingt schlau, jedem input-Element in der letzten Zeile die out-Klasse zu geben. […] Das bessere Vorgehen ist dann, dem Container eine Klasse oder eine ID zu geben und im Stylesheet mit Kombinatoren zu arbeiten.

          Fun fact: Sowas in der Art dachte ich auch mal. (Slides 7 und 8)

          War K… – ähm – Kunst. (Slide 9) 😎

          Kwakoni Yiquan

          PS: Für den normalen Anwendungsfall haste natürlich recht. HTML-Mails sind nicht normal.

          --
          Ad astra per aspera
          1. Hallo Gunnar,

            wie schon so oft gesagt: Deine Notists sind ohne jeden Kommentar und damit für jeden, der deine Rede dazu nicht hört, kaum verständlich. Ich ahne, was Du sagen willst, aber mehr auch nicht.

            Rolf

            --
            sumpsi - posui - obstruxi
            1. @@Rolf B

              wie schon so oft gesagt: Deine Notists sind ohne jeden Kommentar und damit für jeden, der deine Rede dazu nicht hört, kaum verständlich.

              Du spielst auf den Gestaltungsgrundsatz an: Verlasse dich nie auf Farbe allein‽

              In dem Fall: Code-Änderung vorher/nachher, das Weggefallene rot, das Hinzugekommende grün.

              Kwakoni Yiquan

              --
              Ad astra per aspera
              1. Hallo Gunnar,

                nein, ich spiele darauf an, dass ich nicht weiß, worum es da überhaupt gehen soll und welches Problem Du diskutierst. Weil dein Vortrag zu den Folien fehlt.

                Du legst einen Satz kontextloser Notist-Folien hin und erwartest, dass ich telepathisch erfasse, was das soll. Leider habe ich weder Vulkanier noch Betazoiden in meinem Stammbaum.

                Nach längerem Studium des Ganzen kann man sich den Sinn dann möglicherweise erschließen. Aber eigentlich erwarte ICH, dass jemand, der mir etwas vorstellen will, mich da abholt, wo ich stehe und mir nicht zumutet, mich erstmal mit verbundenen Augen zum Ort der Vorstellung hinzutasten.

                Und am Ende zeigt der Notist-Screenshot immer noch zu große Zahlen. Heißt das, dass Du keine Lösung gefunden hast und lediglich das Problem vorstellst?

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Hallo Rolf,

                  Aber eigentlich erwarte ICH, dass jemand, der mir etwas vorstellen will, mich da abholt, wo ich stehe und mir nicht zumutet, mich erstmal mit verbundenen Augen zum Ort der Vorstellung hinzutasten.

                  sehe ich auch so, und genauso ärgerlich finde ich Links, die einfach kommentarlos eingestreut werden. Bevor ich einen Link klicke, will ich wissen, wohin der mich führt. Also zu was für einem Inhalt. Nur kurz in Stichworten, kein Roman.

                  Fällt mir übrigens ähnlich auch oft bei Plakatwerbung auf: Die schmeißt mir irgendein Stichwort an den Kopf, z.B. den Namen eines neuen Produkts, einer Dienstleistung oder einer Internet-Plattform. Und dann vielleicht noch ein QR-Code dazu. Das reicht nicht, um mein Interesse zu wecken.

                  Und am Ende zeigt der Notist-Screenshot immer noch zu große Zahlen. Heißt das, dass Du keine Lösung gefunden hast und lediglich das Problem vorstellst?

                  🤭

                  Einen schönen Tag noch
                   Martin

                  --
                  Wichtige Erkenntnis für Comiczeichner:
                  Eine Sprechblase ist nicht unbedingt ein Fall für den Urologen.
        4. Guten Tag Zusammen,

          nach einem langen lehrreichen Wochenende, bei dem ich mich in das GRID eigelesen habe, tauchen neue Fragen auf. 😇🤪

          Wie kann ich das Grid fixieren, das es die festgelegten Breiten behält?

          .frame-container {
          	display: grid;
          	grid-template-columns: repeat(21);
          	grid-template-rows: repeat(22);
          	grip-column-gap: 0px;
          	grip-row-gap: 0px;
          	align-content: center;
          	justify-content: center;
          	/* gap: 30px; */
          }
          .frame-wurf011 { 
          	grid-area: 4 / 1 / 5 / 2; 
          	text-align: center;
          	align-content: center;
          	height: 30px;
          	font-size: 14px;
          	border: black 1px solid;
          	/* max-width: 30px; */
          }
          

          Wenn ich in ein <div></div> etwas reinschreibe dann wir die ganze Spalte automatisch angepasst. Das war mit meinen Tabellen ganz einfacher.

          Danke und Gruß Jörg

          1. @@Jörg

            Wo ist Beispiel, wo man sich dein Schlamassel ansehen kann? Ohne selbst eins erstellen zu müssen, was deine Aufgabe ist?

            .frame-container {
            	display: grid;
            	grid-template-columns: repeat(21);
            	grid-template-rows: repeat(22);
            

            Hier sollte dir das Entwicklertool deines Browsers Fehler anzeigen. Im Wiki wirst du fündig, welche Argumente die repeat()-Funktion erwartet.

            Kwakoni Yiquan

            --
            Ad astra per aspera
  2. Dieser Beitrag wurde gelöscht: Beitrag ist Spam.