Javascript 我得到未捕获的TypeError:无法读取属性'；选项'；即使已定义元素id，也为null_Javascript_Html_Html Datalist

Javascript 我得到未捕获的TypeError:无法读取属性'；选项'；即使已定义元素id，也为null

javascript html

Javascript 我得到未捕获的TypeError:无法读取属性'；选项'；即使已定义元素id，也为null,javascript,html,html-datalist,Javascript,Html,Html Datalist,我不熟悉Javascript和HTML。即使我在HTML中定义了元素，我也会遇到这个异常。有人能帮忙吗？我正在尝试根据用户输入的形状类型、坐标、宽度、颜色等绘制一个形状（最初是一个圆），我正在使用HTML中的数据列表。但无法获取在javascript函数“rendershape”中选择的数据列表形状的值下面是我的代码： <!DOCTYPE html> <html> <title>Orchid School</title> <body>

我不熟悉Javascript和HTML。即使我在HTML中定义了元素，我也会遇到这个异常。有人能帮忙吗？我正在尝试根据用户输入的形状类型、坐标、宽度、颜色等绘制一个形状（最初是一个圆），我正在使用HTML中的数据列表。但无法获取在javascript函数“rendershape”中选择的数据列表形状的值

下面是我的代码：

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


兰花学校
输入形状：




输入X坐标：






输入Y坐标：






输入颜色：





输入线宽：





绘制形状

您的浏览器不支持HTML5画布标记

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


函数rendershape（）
{   
document.write（'IN JS'）；
var shape=document.getElementById（“shapeid”）.options.value；
控制台。原木（形状）；
文件。书写（形状）；
var xcoordina=document.getElementById（“xcoordinates”）.options.value；
控制台日志（xcoordinates）；
var ycoordinate=document.getElementById（“ycoordinates”）.options.value；
控制台日志（ycoordinates）；
var width=document.getElementById（“width”）.options.value；
如果（形状==‘圆’）
{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（Xcoordinate，ycoordinate，50,0,2*Math.PI）；
ctx.stroke（）；
}
}

首先执行以下命令：

document.write（'IN JS'）

，在您的文档只包含JS中的

之后，您将擦除其他元素。之后，id为shapeid的元素就不存在了。
首先执行这个：document.write（'IN JS'）
，在您的文档只包含JS中的之后，您将擦除其他元素。之后，id为shapeid的元素就不存在了。
请仔细查看您的代码，您需要将'='而不是'-'放进去
<input list="color" name="colorName">

请仔细查看您的代码，您需要将“=”而不是“-”
<input list="color" name="colorName">

请更正以下几点的代码，然后重试

您没有myCanvas
元素
不要使用options.value
只需使用value
删除文档。写入，它会清理页面，以便使用控制台进行调试。日志
求助于


更新：我认为最好是用它的视觉解释
将您的代码更正为以下几点，然后再试一次

您没有myCanvas
元素
不要使用options.value
只需使用value
删除文档。写入，它会清理页面，以便使用控制台进行调试。日志
求助于


更新：我认为最好是用它的视觉解释
试试var shape=document.getElementById（“shapeid”）.valuetry var shape=document.getElementById（“shapeid”）。value@shyammakwana.me在document.write
no之后，使行document.getElementById（“shapeid”）.options.value
抛出error@shyammakwana.meshapeid在文档之后消失。write@shyammakwana.me在document.write
no之后，使行document.getElementById（“shapeid”）.options.value
抛出error@shyammakwana.medocument.writeThanks查找答案后，shapeid消失，我现在可以画一个圆圈了！！！我删除了document.write，它成功了。但是，我们没有得到这个概念……是不是一旦我们使用document.write，javascript的执行/编译就会停止？不，编译不会停止。但是一旦执行了document.write
，它就会清除整个文档，因此您的js、html、css
所有内容都将被清除，因此没有下一行要执行。所以它看起来停止了。谢谢你的回答，我现在可以画一个圆圈了！！！我删除了document.write，它成功了。但是，我们没有得到这个概念……是不是一旦我们使用document.write，javascript的执行/编译就会停止？不，编译不会停止。但是一旦执行了document.write
，它就会清除整个文档，因此您的js、html、css
所有内容都将被清除，因此没有下一行要执行。因此，它看起来好像停止了。