Проблема с appendChild холст не включает консоль TypeError JS
у меня было сообщение об ошибке из консоли
это код js
консольное сообщение: Uncaught TypeError: невозможно прочитать свойство appendChild со значением null в file1.js: 15
// Create the Canvas On Page
var myPageCanvas = document.createElement('canvas');
// Assign ID to this canvas
myPageCanvas.id = 'c';
myPageCanvas.width = 600;
myPageCanvas.height = 100;
myPageCanvas.style.display = 'block';
myPageCanvas.style.margin = '50px auto';
// Add the canvas to the Page
document.body.appendChild(myPageCanvas);
// Get Canvas information
var mycanvas = document.getElementById('c');
myContext = mycanvas.getContext('2');
// fill and style option
myContext.fillStyle = '#f00';
myContext.strokeStyle = '#00f';
myContext.lineWidth = 4;
myContext.font = '100px Arial';
// add the text
myContext.fillText('Elzero Web School', 50, 80);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Это не твоя проблема. Ваш контекст не записывается в myContext var. Чтобы доказать это, вы можете console.info(mycanvas) ≈ и вы увидите, что он действительно есть.
Изменять:
myContext = mycanvas.getContext('2');
К:
myContext = mycanvas.getContext('2d');
Добро пожаловать. Учтите это: Что мне делать, если кто-то ответит на мой вопрос?
Проблема может заключаться в том, что вы загружаете скрипт перед телом. Вы должны загружать скрипт после тега тела. Например:
<!DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title></title>
</head>
<body>
<h1>Body content</h1>
</body>
<script>
var myPageCanvas = document.createElement('canvas');
// Assign ID to this canvas
myPageCanvas.id = 'c';
myPageCanvas.width = 600;
myPageCanvas.height = 100;
myPageCanvas.style.display = 'block';
myPageCanvas.style.margin = '50px auto';
// Add the canvas to the Page
document.body.appendChild(myPageCanvas);
// Get Canvas information
var mycanvas = document.getElementById('c');
myContext = mycanvas.getContext('2d');
// fill and style option
myContext.fillStyle = '#f00';
myContext.strokeStyle = '#00f';
myContext.lineWidth = 4;
myContext.font = '100px Arial';
// add the text
myContext.fillText('Elzero Web School', 50, 80);
</script>
</html>
Или включите файл js после загрузки тела:
<!DOCTYPE html>
<html>
<head lang = "en">
<meta charset = "UTF-8">
<title></title>
</head>
<body>
<h1>Body content</h1>
</body>
<script src = "path/to/file.js"></script>
</html>
Я использовал первый, он работает без консольного сообщения, и использовал второй, контент отображается в браузере, но у меня все еще есть консольное сообщение, поэтому проблема только в заказе? Спасибо большое за вашу помощь
проверьте свой код, и единственная ошибка, которую я получил, была
Uncaught TypeError: Cannot set property 'fillStyle' of null
Это потому, что в контексте вы должны использовать 2d вместо 2 после этого все работает нормально.
Единственный способ воспроизвести вашу ошибку - иметь файл HTML, который не содержит тега тела, или, возможно, вы вызываете скрипт перед тегом тела в структуре HTML.
Это рабочий пример. https://jsfiddle.net/v4e0twd5/
да, вы правы, я раньше называл JS-файл после того, как отображался контент, но все равно получал ошибку
да ты прав, я забыл большое спасибо за твою помощь