Я получаю Uncaught TypeError: Невозможно прочитать свойство 'options' из null, даже если идентификатор элемента определен

Я новичок в Javascript и HTML. Я получаю это исключение, хотя у меня есть элемент, определенный в HTML. Пожалуйста, кто-нибудь может помочь? Я пытаюсь нарисовать фигуру (изначально круг) в зависимости от ввода от пользователя, такого как тип фигуры, координаты, ширина, цвет и т. Д., И я делаю это с использованием datalist в 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>
Источник

3 ответа

Решение

Исправьте ваш код для пунктов ниже, а затем попробуйте.

  • У вас нет myCanvas элемент
  • вместо options.value просто используйте value

  • Удалить document.write, он очищает вашу страницу, для использования при отладке console.log

    получить помощь от tutorialspoint.com

обновление: я думаю, что w3resource лучше с его визуальным объяснением

Источник

Для начала вы выполните это: document.write('IN JS');после этого ваш документ содержит только IN JSВы стираете другие элементы. После этого элемент с id shapeid не существует

Источник

Пожалуйста, внимательно посмотрите на свой код. Вы должны поставить '=' вместо '-'

<input list="color" name="colorName">
Источник
Другие вопросы по тегам