Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Video Switcher ElementById "null or not an object"?

    Below are the full Javascript and HTML to detect a browser and either display HTML5 or Flash video. However, the script is returning an error, 'document.getElementById(...)' is null or not an object. Any suggestions?

    Code:
    var deviceAgent = navigator.userAgent.toLowerCase();
    $brwzr = deviceAgent.match(/(chrome|firefox|safari|msie 9.0)/);
    
    
    if ($brwzr) {
    	document.getElementById("video_5").setAttribute("class", "on");
    } 
    else {
    	document.getElementById("video_F").setAttribute("class", "on");
    }
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8">
    		<title>Video Switch</title>
    <script language="JavaScript" src="index/js/detect.js"></script>
    
    <style>
    <!--
    .off {
    	display: none;	
    }
    
    .on {
    	display: inline;	
    }
    -->
    </style>
    
    </head>
    <body>
    
    <div id="video_5" class="off">HTML5!</div>
    <div id="video_F" class="off">Flash!</div>
    
    </body>
    </html>
    Last edited by Charlie8776; 01-04-2012 at 04:30 PM. Reason: Resolved

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Are you sure the page is completely loaded when you try to find an element by its id?
    You have to call the getElementById method only from within the event handler like window.onload or DOMContentLoaded.
    I am still learning English

  • Users who have thanked Amphiluke for this post:

    Charlie8776 (01-04-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    27
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Amphiluke View Post
    Are you sure the page is completely loaded when you try to find an element by its id?
    You have to call the getElementById method only from within the event handler like window.onload or DOMContentLoaded.
    Ah, okay. I added
    Code:
    <body onload="switch()">
    to the HTML and put the script in the function "switch". It works, many thanks!

  • #4
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    You are welcome. But it would be better to use the window.onload event handler, according to the principles of "unobtrusive JavaScript".
    Code:
    window.onload = function() {
        var deviceAgent = navigator.userAgent.toLowerCase();
        $brwzr = deviceAgent.match(/(chrome|firefox|safari|msie 9.0)/);
        if ($brwzr) {
            document.getElementById("video_5").setAttribute("class", "on");
        } else {
            document.getElementById("video_F").setAttribute("class", "on");
        }
    }
    I am still learning English


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •