Javascript Error — Uncaught TypeError: Cannot set property 'width' of null

Question

So im trying to code in HTML5 and basically, When user is logged in they can enter rooms This is what I got. Can anyone help?

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

Then my rooms.js is:

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;

Im new to using canvas as well as javascript so im trying to learn. Basically, When i click the room button and the room div pops up i want the canvas to be displayed. Any ideas?

Thanks everyone in advance!

Answer 1

The error occurs because there is no element with id "plan" in your HTML. querySelector returns null in that case.

Return value: An HTMLElement object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.