0
Ich bin neu in Javascript und HTML.Ich bekomme diese Ausnahme, obwohl ich Element in HTML definiert haben. Kann mir bitte jemand helfen? Ich versuche, eine Form (anfangs ein Kreis) abhängig von der Eingabe von Benutzer wie Formtyp, Koordinaten, Breite, Farbe usw. zu zeichnen, und das mache ich mit Datenlisten in HTML. Aber nicht in der Lage, den Wert der Datenform zu erhalten, die in der JavaScript-Funktion "rendshape" ausgewählt wurde.Ich bekomme Uncaught TypeError: Kann 'Eigenschaft' von Null nicht lesen, obwohl Element-ID definiert
Unten ist mein Code:
<!DOCTYPE html>
<html>
<title>Orchid School</title>
<body>
<form id="myForm" name="formName" onSubmit="rendershape();">
Enter a shape:<br>
<input list="shapes" id="shapeid" name="shapeName">
<datalist id="shapes">
<option value="Circle">
<option value="Square">
<option value="Rectangle">
<option value="polygon">
<option value="triangle">
</datalist>
<br><br>
Enter X-coordinate:
<br><br>
<input list="xcoordinates" name="xcoName">
<datalist id="xcoordinates">
<option value="50">
<option value="75">
<option value="100">
<option value="150">
<option value="200">
</datalist>
<br><br>
Enter Y-coordinate:
<br><br>
<input list="ycoordinates" name="ycoName">
<datalist id="ycoordinates">
<option value="50">
<option value="75">
<option value="100">
<option value="150">
<option value="200">
</datalist>
<br><br>
Enter colour:<br><br>
<input list="color" name-"colorName">
<datalist id="color">
<option value="Red">
<option value="Blue">
<option value="Orange">
<option value="Black">
<option value="Green">
</datalist>
<br><br>
Enter line width: <br><br>
<input list="width" name="WidhtName">
<datalist id="width">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="5">
</datalist>
<br><br>
</form>
<button onclick="rendershape()">Draw shape</button><br><br>
Ihr Browser die HTML5-Canvas-Tag nicht unterstützt.
<script>
function rendershape()
{
document.write('IN JS');
var shape= document.getElementById("shapeid").options.value;
console.log(shape);
document.write(shape);
var xcoordinat=document.getElementById("xcoordinates").options.value;
console.log(xcoordinates);
var ycoordinate=document.getElementById("ycoordinates").options.value;
console.log(ycoordinates);
var width=document.getElementById("width").options.value;
if(shape=='Circle')
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(xcoordinat,ycoordinate,50,0,2*Math.PI);
ctx.stroke();
}
}
</script>
</body>
</html>
try var shape = document.getElementById ("ShapeID") Wert –