1. Limited time only! Sign up for a free 30min personal tutor trial with Chegg Tutors
    Dismiss Notice
Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

Help needed: basic javascript program

  1. Nov 22, 2009 #1
    1. The problem statement, all variables and given/known data

    I'm supposed to write a program that upon clicking a command button generates a random number, and displays 1 of 7 images that is associated with the random number generated.

    Ive been at this for a few hours and cant get the image to change.

    EDIT:
    Upon further testing it seems to work on firefox, but not on internet explorer, which is the browser that it will be tested on.
    Anyone know whats going on here?

    3. The attempt at a solution
    Code (Text):

    <html>
    <head><title>Assignment #5</title></head>
    <script language="Javascript">

    function random()
    {
        number=Math.floor(Math.random()*7);
        number=number + 1;
       
        caption= "your number is" + " " + number;

        if(number==1)
        {
            OutputArea.innerText=caption;
            document.images.src="al.jpg";
        }  
       
        else if(number==2)
        {
            OutputArea.innerText=caption;
            document.images.src="city.jpg";
        }
        else if(number==3)
        {
            OutputArea.innerText=caption;
            document.images.src="dance.jpg";
        }
        else if(number==4)
        {
            OutputArea.innerText=caption;
            document.images.src="good.jpg";
        }
        else if(number==5)
        {
            OutputArea.innerText=caption;
            document.images.src="kiss.jpg";
        }
        else if(number==6)
        {
            OutputArea.innerText=caption;
            document.images.src="sleep.jpg";
        }
        else if(number==7)
        {
            OutputArea.innerText=caption;
            document.images.src="vince.jpg";
        }
    }
    </script>

    <body bgcolor=blue text=white onload="random()">

    <center>

    //initiates function

    <input type="button" value="images" title="click to dislpay image" onclick="random()">

    // where the messege is displayed
    <B ID="OutputArea">

    // where the image is displayed
    <img src="al.jpg" name="images">

    </body>
    </html>
     
     
    Last edited: Nov 22, 2009
  2. jcsd
  3. Nov 22, 2009 #2

    Mark44

    Staff: Mentor

    Does the caption change when you run your script?
    Shouldn't this tag - <B ID="OutputArea"> -- be <body ID ="OutputArea"> ?
    In the <body> element, it looks to me like it will always display "al.jpg".
     
  4. Nov 22, 2009 #3
    Yeah the caption changes.
    I set the default to al.jpg because I thought the onload="random()" (contained in the body tag) would change it.
    Is there anything I could replace al.jpg with?
     
    Last edited: Nov 22, 2009
  5. Nov 22, 2009 #4

    DaveC426913

    User Avatar
    Gold Member

    'images' is a reserved word. It refers to the array of images.
    By giving your element the name images you risk confusion.

    Do this:

    document.getElementById('images').src="sleep.jpg";
    <img src="al.jpg" ID="images">


    Or you could try this:

    document.images[0].src="sleep.jpg";
     
    Last edited: Nov 22, 2009
  6. Nov 22, 2009 #5
    I tried both, and I also changed images. Neither thing worked unfortunately.
     
  7. Nov 22, 2009 #6

    DaveC426913

    User Avatar
    Gold Member

    Post your new code.
     
  8. Nov 22, 2009 #7

    DaveC426913

    User Avatar
    Gold Member

    You never close the <B> element. Now it makes sense why the image is never updated. It doesn't exist.

    When you set OutputArea.innerText to your caption, you are overwriting all the HTML, wiping out the <img> element.



    So:
    Code (Text):
    <B ID="OutputArea">[B]</B>[/B]
    then:
    Code (Text):
    document.getElementById('OutputArea').innerText=caption
     
  9. Nov 22, 2009 #8
    Nice that did it. Thanks for the help
     
  10. Nov 22, 2009 #9

    DaveC426913

    User Avatar
    Gold Member

    Sho thang.
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook




Similar Discussions: Help needed: basic javascript program
  1. C program help needed (Replies: 3)

Loading...