SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: getelementbyid?

  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getelementbyid?

    i have some code that grabs a random image and the corresponding copy to go with it:

    HTML Code:
    var imagenumber = 9 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
     
    images = new Array
    images[1] = "images/H-1.jpg"
    images[2] = "images/H-2.jpg"
    images[3] = "images/H-3.jpg"
    images[4] = "images/H-4.jpg"
    images[5] = "images/H-5.jpg"
    images[6] = "images/H-6.jpg"
    images[7] = "images/H-7.jpg"
    images[8] = "images/H-8.jpg"
    images[9] = "images/H-9.jpg"
    var image = images[rand1]
     
    links = new Array
    links[1] = "http://www.green.com"
    links[2] = "http://www.red.com"
    links[3] = "http://www.yellow.com"
    links[4] = "http://www.orange.com"
    links[5] = "http://www.magenta.com"
    links[6] = "http://www.purple.com"
    links[7] = "http://www.darkblue.com"
    links[8] = "http://www.cyan.com"
    links[9] = "http://www.aqua.com"
    var link = links[rand1]
    
    var Heading = new Array()
     
    Heading[1] = "green";
    Heading[2] = "red";
    Heading[3] = "yellow";
    Heading[4] = "orange";
    Heading[5] = "magenta";
    Heading[6] = "purple";
    Heading[7] = "dark blue";
    Heading[8] = "cyan";
    Heading[9] = "aqua";
     
    document.write('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0" width="225" height="157"></a>')
    
    
    function showHeading(){document.write(Heading[rand1]);}
    showHeading();
    the problem is that i want to be able to apply the results to specific <div>'s. i want the results of
    HTML Code:
    document.write('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0" width="225" height="157"></a>')
    to be applied to the <div id="imageHolder"> and the results of
    HTML Code:
    function showHeading(){document.write(Heading[rand1]);}
    showHeading();
    to be applied to <div id="headingHolder">. i suspect its somthing with getelementbyid, but i really cant figure it out. help!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    document.write can only run before the page loads.

    getElementById can only run after the page loads.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i see. any idea how you would re-work the above code to accomodate this? my head feels like it is going to explode!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by stros View Post
    i see. any idea how you would re-work the above code to accomodate this? my head feels like it is going to explode!
    The standard solution is to put the script at the bottom of the body, just before the </body> tag, and to use document.getElementById to access the page element you need.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies. i have been messing around with the tips you guys provided yet am still having difficulties. what i have (simplified for this exercise) is a
    HTML Code:
    <div id="Highlight_1"><img src="images/Highlights/H-1.jpg" width="225" height="157" alt="image1"></div>
    and at the end of my document before the last </body> tag is the linked external javascript file [HTML]<script type="text/javascript" src="script-x/HighlightsRandomizer.js"></script>[HTML] - written out below is the javascript:
    HTML Code:
    var imagenumber = 9 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
     
    images = new Array
    images[1] = "../source/RandomAll/images/i1.jpg"
    images[2] = "../source/RandomAll/images/i2.jpg"
    images[3] = "../source/RandomAll/images/i3.jpg"
    images[4] = "../source/RandomAll/images/i4.jpg"
    images[5] = "../source/RandomAll/images/i5.jpg"
    images[6] = "../source/RandomAll/images/i6.jpg"
    images[7] = "../source/RandomAll/images/i7.jpg"
    images[8] = "../source/RandomAll/images/i8.jpg"
    images[9] = "../source/RandomAll/images/i9.jpg"
    var image = images[rand1]
     
    links = new Array
    links[1] = "http://www.green.com"
    links[2] = "http://www.red.com"
    links[3] = "http://www.yellow.com"
    links[4] = "http://www.orange.com"
    links[5] = "http://www.magenta.com"
    links[6] = "http://www.purple.com"
    links[7] = "http://www.darkblue.com"
    links[8] = "http://www.cyan.com"
    links[9] = "http://www.aqua.com"
    var link = links[rand1]
    
    document.getElementById("Highlight_1").innerHTML=('<a href="' + link + '"><IMG SRC="' + image + '" border="0"></a>');
    i have tried changing the .innerHTML to alert and it pops up the randomizing message after each page reload so i know the randomization code is running, but i still get nothing. help!

  6. #6
    SitePoint Enthusiast
    Join Date
    Dec 2010
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    kept messing around this morning, finally figured it out. dont know whats different (havnt looked closely yet) but it works! the winning line of code is below:
    HTML Code:
    document.getElementById("Highlight_1").innerHTML = ('<A HREF="' + link + '"><IMG SRC="' + image + '" border="0"></a>');
    thanks for the help.


Bookmarks

Posting Permissions

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