CODEWITHSUNDEEP
javascript
Michael Meis
Michael Meis

Reputation: 27

Display an image as part of a function

I am trying to make a race using javascript. I have two images that start on the left side. Once the user clicks go, they move at random intervals towards the right side. Once they reach the right side they stop. I need to display an image indicating which image reached the end first. I have the race portion of it working but when they reach the end, the winners image never shows up. Thanks for any help?

function move_img(str) 
{
    var x=document.getElementById('i1').offsetTop;
    x= x +100;
    document.getElementById('i1').style.top= x + "px";
}

function playerOne()
{
    var step = Math.random();
    var y1=document.getElementById('i1').offsetTop;
    var x1=document.getElementById('i1').offsetLeft;
    if(x1 < 500 ){x1= x1 +step;
        document.getElementById('i1').style.left= x1 + "px";
    }

    return x1;
}

function playerTwo()
{
    var step = Math.random();
    var y2=document.getElementById('i2').offsetTop;
    var x2=document.getElementById('i2').offsetLeft;
    if(x2 < 500 ){x2= x2 +step;
        document.getElementById('i2').style.left= x2 + "px";
    }

    return x2;
}

function timer()
{
    var x1 = 0;
    var x2 = 0;

    if ( (x1 < 500 && x2 < 500))
    {
        playerOne();
        playerTwo();
        var x=document.getElementById('i1').offsetLeft;
        var y=document.getElementById('i1').offsetTop;
        my_time=setTimeout('timer()',10);
        x1 = document.getElementById('i1').offsetLeft;
    } else if ( (x1 == 500 && x2 < 500))
    {
        function winnerPlayerOne()
        {
            var img = document.createElement('img');
            img.src = "/images/winner_ford.png";
            document.body.appendChild(img);
        }

    } else {
        function winnerPlayerTwo()
        {
        var img = document.createElement('img');
        img.src = "/images/winner_meis.png";
        document.body.appendChild(img);
        }
    }

}

Upvotes: 1

Views: 986

Answers (2)

Michael Meis
Michael Meis

Reputation: 27

For anyone interested who finds this later, this is how I got it working:

HTML:

    <html>
        <head>
            <title>The Race for an A!</title>
            <link rel="stylesheet" type="text/css" href="race.css"> 
            <script type='text/JavaScript' src="race.js" language=javascript>
            </script>
        </head>

        <body>

            <h1 class = "amazing"> The Amazing Race For an A! </h1>

            <h1 class = "fordmeis"> Professor Ford Vs Michael Meis </h1>

            <div id="traffic-light">
            <div id="stopLight" class="bulb"></div>
            <div id="slowLight" class="bulb"></div>
            <div id="goLight" class="bulb"></div>
            </div>

            <input type=button onClick="illuminateGreen();timer();" value='Go!' style="position: absolute; left: 545px; top:265px;">

            <img src=images/teacher.jpg id='i1' style="position:absolute; left: 25; top: 325; z-index:2;" width ="100" >
                <br><br><br><br>
            <img src=images/meis.png id='i2' style="position:absolute; left: 25; top: 500; z-index:2;" width ="100">
            <img src=images/road.jpg id='road' style="position:absolute; left: 30; top: 325; z-index:1;" height = "133" width ="1180">
            <img src=images/road.jpg id='road' style="position:absolute; left: 30; top: 500; z-index:1;" height = "133" width ="1180">
            <img src=images/winner_ford.png id='image1' style="position:absolute; left: 5; top: 0; z-index:3;" width ="100%" height = "100%" onclick="reset()">
                <br><br><br><br>
            <img src=images/winner_meis.png id='image2' style="position:absolute; left: 5; top: 0; z-index:3;" width ="100%" height = "100%" onclick="reset()">

            <script>
                illuminateRed()
                hideImage()
            </script>

        <div class="vertical-line" />

        </body>
    </html>

JS:

<!--

function hideImage() 
{
    document.getElementById("image1").src = "images/winner_ford.png";
    document.getElementById("image2").src = "images/winner_meis.png";

    document.getElementById("image1").style.visibility = "hidden";
    document.getElementById("image2").style.visibility = "hidden";

}

function meis()
{
    document.getElementById("image2").style.visibility = "visible";
}

function ford()
{
    document.getElementById("image1").style.visibility = "visible";
}

function timer()
{
    var x1 = 0;
    var x2 = 0;
    var step1 = Math.random();
    var step2 = Math.random();
    var x1=document.getElementById('i1').offsetLeft;
    var x2=document.getElementById('i2').offsetLeft;

    if(x1 < 1100 && x2 < 1100)
    {
        x1 = x1 + step1;
        x2 = x2 + step2;

        document.getElementById('i1').style.left= x1 + "px";
        document.getElementById('i2').style.left= x2 + "px";

        setTimeout('timer()', 1);
    }else if ( x1 >= 1100 )
        {
            ford();
        }
        else if ( x2 >= 1100 )
        {
            meis()
        }
}

function illuminateRed()
    {
    clearLights();
    document.getElementById('stopLight').style.backgroundColor = "red";
    }

function illuminateGreen() {
    clearLights();
    document.getElementById('goLight').style.backgroundColor = "green";
    }

function clearLights() {
    document.getElementById('stopLight').style.backgroundColor = "black";
    document.getElementById('goLight').style.backgroundColor = "black";
    }

function reset()
{
    location.reload()
}

//-->

Upvotes: 0

Charlie
Charlie

Reputation: 23798

I see two problems in your code.

The first one is that you assume a particular winner to land right on the 500 margin while increasing it's value by random numbers. 

if ( (x1 == 500 && x2 < 500))

In the above condition, x1, the winner here, can well be beyond 500 according to your logic.

The second problem is, assuming your logic somehow reaches image creation part, that you create images and just add it to the body. You never say where these images should show up.

var img = document.createElement('img');
img.src = "/images/winner_ford.png";
document.body.appendChild(img);

There is a high chance the above code will create an image, but sneak under another absolutely-positioned element when added to the body.

Upvotes: 1

Related Questions