+ 1
Canvas Wont Appear
This code works for other Id's, but it won't work for a canvas. code: <canvas id="canvas"></canvas> <button onclick="start()">START GAME</button> <style> canvas { display: none; } </style> <script> function start() { var c = document.getElementById('canvas'); if (c.style.display === 'none') { c.style.display = 'block'; } }
5 Réponses
+ 2
@ChaoticDawg
at getPropertyValue() you can change to
getComputedStyle(c).display === 'none'
+ 1
.style.display this will display as undefined bc <canvas> didn't hold style attribute with display css property
<canvas style="display:none">
^^^ do .style.display then you will require 'none'
More:
.style.CSSPropName didn't return the current style of element
+ 1
Can I have a working copy, please?
+ 1
Try this:
function start() {
var c = document.getElementById('canvas');
if (window.getComputedStyle(c).getPropertyValue("display") === 'none') {
c.style.display = 'block';
}
}
For Internet Explorer use currentStyle instead of getComputedStyle
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
https://developer.mozilla.org/en-US/docs/Web/API/Element/currentStyle
https://msdn.microsoft.com/en-us/library/ms535231(v=vs.85).aspx
You can do a check to see which of the above is supported by using something like:
function start() {
var c = document.getElementById('canvas');
if (typeof window.getComputedStyle != "undefined") {
if (window.getComputedStyle(c).getPropertyValue("display") === 'none') {
c.style.display = 'block';
}
} else if (c.currentStyle != "undefined") {
if (c.currentStyle.display === 'none') {
// c.currentStyle.getPropertyValue("display") may also work (or something like this)
c.style.display = 'block';
}
}
}
0
Try giving it a width and height.
https://www.w3schools.com/html/html5_canvas.asp