Web Analytics Made Easy -
StatCounter HELP - Create HTML using window.onload + function - CodingForum

Announcement

Collapse
No announcement yet.

HELP - Create HTML using window.onload + function

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • HELP - Create HTML using window.onload + function

    Greetings

    I have been attempting to add HTML elements in my document during the window.onload to call an html injecting function using several different approaches, none of which are working. In Chrome's developer tools>scripts my most commonly occurring error is cannot call method (i.e. appendChild, innerHTML) on "null".

    Below are my 3 approaches, can anyone see why they are not working?

  • #2
    APPROACH 1:

    window.onload = initAll();
    function initAll() {

    var imgStack = [
    "image1_ad",
    "image2_ad",
    "image3_ad"
    ];

    //Creates IMG elements in the HTML from the array names above

    for(i=0; i<imgStack.length; i++) {
    var sContainer = document.getElementById('slideShowContainer');
    var imgSrc = "cImg/" + imgStack[i] + ".png";
    var imgElement = "<img src='" + imgSrc + "' />";
    sContainer.appendChild(imgElement);
    }
    }

    Comment


    • #3
      APPROACH 2:

      window.onload = initAll();

      function initAll() {
      //Add Images using format: "imageName_xx", (NO comma on LAST image)
      var imgStack = [
      "grimreaper1_ad",
      "grimreaper2_ad",
      "grimreaper3_ad"
      ];

      //Creates IMG elements from the array names in the HTML
      for(i=0; i<imgStack.length; i++) {
      var sContainer = document.getElementById('slideShowContainer');
      var imgSrc = "cImg/" + imgStack[i] + ".png";
      var imgElement = "<img src='" + imgSrc + "' />";
      sContainer.innerHTML = imgElement;
      }
      }

      Comment


      • #4
        APPROACH 3:

        window.onload = initAll();
        function initAll() {

        var imgStack = [
        "image1_ad",
        "image2_ad",
        "image3_ad"
        ];

        //Creates IMG elements in the HTML from the array names above

        for(i=0; i<imgStack.length; i++) {
        var imgSrc = "cImg/" + imgStack[i] + ".png";
        var imgElement = "<img src='" + imgSrc + "' />";
        document.getElementById('slideShowContainer').appendChild(imgElement);
        }
        }

        Comment


        • #5
          I find it best to use something like this:

          Code:
          window.onload=function(){
          	initAll();
          };
          function initAll() {
          	//Add Images using format: "imageName_xx", (NO comma on LAST image)
          	var imgStack = [
          		"grimreaper1_ad",
          		"grimreaper2_ad",
          		"grimreaper3_ad"
          	];
          
          	//Creates IMG elements from the array names in the HTML
          	for(i=0; i<imgStack.length; i++) {
          		var sContainer = document.getElementById('slideShowContainer');
          		var imgSrc = "cImg/" + imgStack[i] + ".png";
          		var imgElement = "<img src='" + imgSrc + "' />";
          		sContainer.innerHTML = imgElement;
          	}
          }
          If you don't use that "function" part the onload won't work.
          The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
          See Mediocrity in its Infancy
          It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
          Seek and you shall find... basically:
          validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

          Comment

          Working...
          X