TransWikia.com

Setting the width of an article in Javascript doesn't update

Stack Overflow Asked by user11914177 on November 29, 2021

I have this code for a canvas and a chat:

<section id="main_section">
        <article id="GL">
            <canvas id="GL-Surface">

            </canvas>
        </article>

        <article id="chat">
            <script src="chat.js"></script>
        </article>
</section>

I want to set the width and height of the chat. It works when setting it in CSS, but I want to change the size of the chat inside of Javascript, since the canvas might get bigger. I use these commands to set the size:

document.getElementById("chat").width = w;
document.getElementById("chat").height = h;

But the chat doesn’t change the size. These lines work for changing the size of the article containing the canvas. Printing out the document.getElementById("chat").width returns the right value, which is weird.

What is going on, that the same commands only work for some objects?

2 Answers

The <script> tag doesn't belong there - it may know what the #gl element is, but it may not know what #chat is if the script executes before #chat gets defined by closing the article tag.

Move it to the bottom of the body.

Answered by Rubens on November 29, 2021

Since you have set the width and height in your CSS, you can only modify the style properties of the canvas to change it, i.e. canvas.style.width and canvas.style.height.

const canvas = document.querySelector('canvas');
canvas.style.width = "500px";
canvas {
  width: 200px;
  height: 200px;
  background-color: dodgerblue;
}
<canvas></canvas>

Answered by Unmitigated on November 29, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP