我得到未捕获的类型错误:无法读取属性'选项'即使定义了元素id，也为null

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

本文关键字：选项 定义 null 也为 id 元素 属性 类型 读取 错误      更新时间：2024-03-15

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

您的浏览器不支持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>

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

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

  • 您没有myCanvas元素
  • 不使用options.value，只使用value

  • 删除document.write，它会清理您的页面，用于调试使用console.log

    从tutorialspoint.com 获得帮助

更新：我认为w3resource最好使用它的可视化解释

请仔细查看您的代码，您需要放置'='而不是'-'

<input list="color" name="colorName">
相关文章：