Quiero ocultar el contenido de id="root" cuando la página no tiene el elemento canvas. Y quiero mostrar el contenido de id="root" cuando la página tiene el elemento canvas. Aquí está mi guión: -

 <script> document.getElementById("root").style.display = "none"; console.log("root = " + document.getElementById("root")); let canvas = document.getElementsByTagName("canvas")[0]; console.log("canvas = " + canvas); let containsCanvas = document.getElementById("root").contains(canvas); let inter = setInterval( function() { containsCanvas = document.getElementById("root").contains(canvas); console.log("contains Canvas = " + containsCanvas); if (containsCanvas) { document.getElementById("root").style.display = "block"; clearInterval(inter); } }, 100) </script>

Pero este código no funciona. He escrito este script en el index.html de un proyecto de reacción. El console.log("contains Canvas = " + containsCanvas); siempre muestra false .

Cuando inspecciono, veo que el elemento de lienzo está presente. Pero console.log("canvas = " + canvas); se muestra undefined .

¿Alguien puede ayudarme?