Javascript错误--未捕获的TypeError:无法设置属性'；宽度'；空的

所以我试着用HTML5编码，基本上，当用户登录后，他们可以进入房间，这就是我得到的。有人能帮忙吗

<script src="assets/styles/js/rooms.js"></script>

<canvas id="room">
  <div id="room">
    <div class="btn-exit" id="sortirImmediatement">
      <h1>Return to View</h1>
    </div> <!-- Bouton d'urgence -->

    <div class="appart-info-container"> <!-- Informations de l'appartement -->
      <div class="appart-info-name">
        <p>Welcome Lobby</p>
        <span>by Pure</span>
        <br><br>
      </div>
      <div class="appart-info-tools">
        <div class="liste-tools">
          <ul>
            <li><img src="assets/images/room/para.png">Settings</li>
            <li><img src="assets/images/room/zoom.png">Zoom</li>
            <li><img src="assets/images/room/chats.png">Chats</li>
            <li><img src="assets/images/room/like.png">Likes</li>
            <li id="ouvrirshareappart"><img src="assets/images/room/share.png">Share Room</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</canvas>

我不熟悉使用画布和javascript，所以我正在努力学习。基本上，当我点击room按钮，room div弹出时，我希望显示画布。有什么想法吗

---

提前谢谢大家

发生此错误是因为HTML中没有id为“plan”的元素。在这种情况下，返回

null

返回值： 表示文档中与指定CSS选择器集匹配的第一个元素的HtmleElement对象，如果没有匹配项，则返回null

---

它到底失败了哪行代码？HTML中没有id为“plan”的元素。据猜测，它在

canvas.width=width。我会检查什么
document.querySelector（“#plan”）
-HTML中的画布的id为
房间
。考虑到下一个div的id也是
room
，我建议您将画布的id更改为
plan
，因为重复id是无效的。在修复id后，我不再出现错误。但我不明白的是，我的网站没有通过加载栏加载。它加载99%，然后失败，没有错误日志。我想这和试图在整个网站上显示画布有关。那么我如何才能让这个画布显示在房间内呢？因为当单击房间时，房间div会打开。在旁注中，至少有一个HTML标记没有关闭，而缩进使您很难发现这一点。在JavaScript中，应该使用
const
而不是
let
，除非重新分配变量。此外，您的标签名称具有混合约定，包括蛇壳和骆驼壳，这会分散您的注意力。
function drawCanvas(element, width, height){
    let canvas = element;canvas.width = width;canvas.height = height;
    let context = canvas.getContext('2d');
    return {context : context, dimension : {width : canvas.width, height : canvas.height}};

}

document.body.onload = function(){
    let plan =  drawCanvas(document.querySelector("#plan"), window.screen.width, 620),
    context = plan.context, dimension = plan.dimension,
    tileWidth = 70,
    tileHeight = 35,
    positionRoom = {x : dimension.width / 2, y : 40},
    roomDimension = {width : 15, length : 21}, room = drawRoom(roomDimension.width, roomDimension.length),
    Geometric = {DET : function(a, b){
        return (a.x * b.y - a.y * b.x);
    }, SEGMENT : function(a, b){
        return {x : b.x - a.x, y : b.y - a.y};
    }},
    activeBlock = tilePoint(room[0]),
    characterPosition = [0, 0],
    n = 0,
    completeClick = false;
    roomBlocks = [];
    dragPosition = {positionA : [dimension.width / 2, 40], positionB : [dimension.width / 2, 40], click : false};
    context.fillStyle = '#000';
    context.fillRect(0, 0, dimension.width, dimension.height);
    let sourceNotLoad = true;
    let compteur_image = 0;