时间戳

首页 > 解决方案 > Javascript 错误 - 未捕获的 TypeError：无法将属性“宽度”设置为 null

javascript - Javascript 错误 - 未捕获的 TypeError：无法将属性“宽度”设置为 null

问题描述

所以我试图用 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>

然后我的 rooms.js 是：

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;

我不熟悉使用画布和 javascript，所以我正在努力学习。基本上，当我单击房间按钮并弹出房间 div 时，我希望显示画布。有任何想法吗？

提前谢谢大家！

标签： javascripthtml

解决方案

发生错误是因为您的 HTML 中没有 ID 为“plan”的元素。 querySelector在这种情况下返回null。

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

推荐阅读