hybrid kill3r Posted August 4, 2011 Share Posted August 4, 2011 I have a script that's supposed to find the width of the user's screen and then change all images within a certain DIV. The name of the DIV is "photoGrid" but it says that it's null when i use getElementById. My HTML and JS codes are below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>LenseReflex</title><link rel='stylesheet' href='style.css' /><script type='text/javascript'>window.onload = adjustWidths();function adjustWidths(){ var photoGrid = document.getElementById("photoGrid"); var gridPhotos = photoGrid.GetElementsByTagName("img"); for(var i=0;igridPhotos.length;i++){ gridPhotos[i].width = (window.availWidth / 10) - (5 * 2); gridPhotos[i].height = gridPhotos[i].width; } }</script></head><body> <div id='photoGrid'> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> <a href='#'><img src='images/noimage.png' /></a> </div> </body></html> Link to comment Share on other sites More sharing options...
brucemand Posted August 4, 2011 Share Posted August 4, 2011 I have a script that's supposed to find the width of the user's screen and then change all images within a certain DIV. The name of the DIV is "photoGrid" but it says that it's null when i use getElementById. My HTML and JS codes are below##CUT## var photoGrid = document.getElementById("photoGrid"); var gridPhotos = photoGrid.GetElementsByTagName("img"); for(var i=0;igridPhotos.length;i++){ gridPhotos[i].width = (window.availWidth / 10) - (5 * 2); gridPhotos[i].height = gridPhotos[i].width;##CUT## i think this ;for(var i=0;igridPhotos.length;i++){is the problem; Link to comment Share on other sites More sharing options...
JamesB Posted August 4, 2011 Share Posted August 4, 2011 GetElementsByTagName needs a lowercase G. for(var i=0;igridPhotos.length;i++){ as Ed pointed out, you forgot the < sign.The reason photoGrid is saying null, is because adjustWidths() is being called before the page has even reached the <body> tag. window.onload = adjustWidths(); window.onload should have a function set to it, what it's currently doing is calling adjustWidths() and assigning the return value of that function to window.onload.so you can either do: window.onload = adjustWidths; or window.onload = function() { adjustWidths(); } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.