Fullscreen using HTML5 and JavaScript

I have tried to fullscreen a div using JavaScript. Here is my HTML and JS:

    var elem = document.getElementById('fullscreenThis');
    function openFullscreen() {
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }
    }
    document.getElementById('fullscreen').addEventListener('click', openFullscreen);
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <body>
    <div id="fullscreenThis">
        Here is some code I want to fullscreen
    </div>
    <button id="fullscreen">fullscreen</button>
    <script src="main.js"></script>
    </body>
    </html>

I have tried this in Firefox and Chrome.

Leave a Comment