How can I display and hide images based on a random number generator?

Question

I am working on a race game using HTML, CSS, and JavaScript. The race's progression will be determined by a random number generating button that will be clicked to simulate the racers. Here is an image of the page: and here is the app.js file in progress.

let racers = [
    { id: "racer1", count: 0 },
    { id: "racer2", count: 0 },
    { id: "racer3", count: 0 },
    { id: "racer4", count: 0 },
    { id: "racer5", count: 0 },
    { id: "racer6", count: 0 },
    { id: "racer7", count: 0 },
];


// random number button
function randNum() {
    const randomNumber = Math.floor(Math.random() * 7 + 1);
    document.getElementById("number").innerHTML = randomNumber;
    racers[randomNumber - 1].count++;
    // new test code
    // ONLY TO TEST IMAGE DISPLAY AND HIDE
    let car1 = document.getElementById("p1First");
    if (car1.style.display === "none") {
        car1.style.display = "none";
    } else {
        car1.style.display = "block";
    }
}



console.log(racers);

In the console, as you click the random number button, the count property will be updated when it has an outcome of a certain number. For example, if the random number generator button is clicked and has an outcome of "4", racer4 will now have a count of "1". This logic will be consistent throughout the whole race as the user continues to click the button until a racer wins, meaning it reached a count of "10" (by having that player's number shown as an outcome of the generator a total of ten times).

My goal is to display the images of each racers in the correlated spot to show the progress they have made in the race. So if racer1 has a "count" of 4, display the fourth image of racer1 (the car), and hide the rest of the car images. If racer2 has a count of 6, display the sixth image of racer2 (the boat), and hide the rest of the boat images. I want it to only show one image of each racer at a time, to illustrate their progress. This will continue until one racer reaches a count of "10", and the tenth image would be displayed, which is at the checkered box finish line.

I am not sure where to start, I just know need to implement logic that allows the count property to "talk to" the image elements. I have an excerpt of code in my app.js that displays and hides one of the images when the button is clicked, but that is just a test to see if it was possible. This excerpt of code will probably need to be altered, moved, and maybe even completely replaced by some other syntax.

Answer 1

Instead of having multiple images, why don't you place the image corresponding to that number? For example, if the "track" is 100px long and "count" is 3, then calculate 3/10 * 100 to get the position of the image scaled to the track size.

If you don't want to do it like this though, you can give each image an ID like so:

<img src="racer_1.jpg" id="racer_1_position_1" style='visibility:"hidden"'>

That image won't appear until you tell toggle it's visibility by getElementById.

function moveRacer(racerID, count) {
document.getElementById(`racer_${racerID}_position_${count}`).style.visibility = "visible"
}

You can generate these images dynamically if you'd like too with a loop.