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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Image display to number range

    So I've got my code ready to generate a random number between a certain range and printing it out in text. What I'm trying to accomplish with this code is to print the actual image as well as the text.

    I'm aware that there is an error in my document.write line, and that it's not the best solution. I was hoping for some suggestions to change/improve this last bit. Thanks in advance!

    Code:
    <html>
    <title>RANDOM IMAGE TO NUMBER RANGE</title>
    <body>
    <center>
    <script language="javascript" type="text/javascript">
    var ranges = [
        { from: 11, image: "image4.jpg" },
        { from: 1, image: "image3.jpg" },
        { from: -9, image: "image2.jpg" },
        { from: -20, image: "image1.jpg" }      
    ];
    
    var random_num = (Math.round((Math.random()*41)+-20));
    var image = "default";
    
    for(var i = 0; i < ranges.length; ++i) {
        if(random_num >= ranges[i].from) {
            image = ranges[i].image;
            break;
        }
    }
    {
    document.write("Text: " + random_num + " Text, " + " Image: = " + image);
    {
    document.write('<img src="images/' + ranges[i].image);
    }
    }
    </script>
    <br></br>
    <div>
    CLICK <a href="javascript:history.go(0);">REFRESH or F5</a> FOR A RANDOM IMAGE on NUMBER-RANGE.
    </div>
    </center>
    </body>
    </html>
    Last edited by fizd; 01-16-2012 at 10:51 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    You seem to be making heavy weather of this. Keep it simple:-

    Code:
    <img id = "myImage" src = "default.jpg">
    
    <script type="text/javascript">
    
    var random_num = (Math.round(Math.random()*41)-20);
    var image = "default.jpg";
    if (random_num >= 11) {image = "image4.jpg"}
    else if (random_num >= 1) {image = "image3.jpg"}
    else if (random_num >= -9) {image = "image2.jpg"}
    else if (random_num >= 11) {image = "image1.jpg"}
    document.getElementById("myImage").src = image;
    
    </script>
    Avoid using document.write(). document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript that triggered it). So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.


    If you wish you can wrap the whole script in a function, and call it onclick of a button.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 01-16-2012 at 11:30 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    fizd (01-16-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thank you very much for your input! It works like a charm.

    I used your code and added to the end:

    alert("Text: " + random_num + " Text, " + " Image: = " + image);

    to show me the image's description as well.


  •  

    Posting Permissions

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