I am getting Uncaught TypeError: Cannot read property 'options' of null even though element id defined

Question

我是 Javascript 的新手，即使我在 HTML 中定义了元素，HTML.I 也遇到了这个异常。请问有人可以帮忙吗？我正在尝试根据用户输入的形状类型、坐标、宽度、颜色等来绘制一个形状（最初是一个圆圈），我正在使用 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>

您的浏览器不支持 HTML5 canvas 标签。

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

Answer 1

首先你执行这个：document.write('IN JS');，之后你的文档只包含 IN JS，你擦除其他元素。之后，id 为 shapeid 的元素将不存在。

Answer 2

请仔细查看您的代码，您需要使用“=”而不是“-”

<input list="color" name="colorName">

Answer 3

针对以下几点更正您的代码，然后尝试。

您没有 myCanvas 个元素
而不是 options.value 只需使用 value
删除 document.write，它会清理您的页面，供调试使用 console.log

从tutorialspoint.com

更新：我认为 w3resource 的视觉解释最好

I am getting Uncaught TypeError: Cannot read property 'options' of null even though element id defined

I am getting Uncaught TypeError: Cannot read property 'options' of null even though element id defined

html

javascript

html-datalist