Question

我是Javascript和HTML的新手。即使我在HTML中定义了元素，我也会遇到此异常。有人可以帮忙吗？我试图绘制一个形状（最初是一个圆圈），取决于用户的输入，如形状类型，坐标，宽度，颜色等，我正在使用HTML中的datalist。但是无法获得在javascript函数“rendershape”中选择的datalist形状的值。

以下是我的代码：

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

Answer 1

首先执行此操作：document.write('IN JS');，之后您的文档仅包含IN JS，您将擦除其他元素。之后，标识为shapeid的元素不存在。

Answer 2

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

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

Answer 3

为你的代码留下以下几点，然后尝试。

您没有myCanvas元素
而不是options.value只需使用value
删除document.write，清除您的网页，以便调试使用console.log

从tutorialspoint.com

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

我得到Uncaught TypeError：即使定义了元素id，也无法读取null的属性'options'

3 个答案: