Home/ Questions/Q 8230985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T17:19:19+00:00

I have set out to make a puzzle, and I am trying to make

  • 0

I have set out to make a puzzle, and I am trying to make a shuffle function in javascript. When I click the document the pieces shuffle as they are supposed to. But when the purple square goes to position #1 in the grid, it doesn’t move!

This is my HTML/Javascript:

<head>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>

<div id="poster">

    <div id="row1">
        <div>
            <img src="images/black.gif" alt="" id="poster_place_1"/>
        </div>

        <div>
            <img src="images/blue.gif" alt="" id="poster_place_2" />
        </div>

        <div>
            <img src="images/brown.gif" alt="" id="poster_place_3"/>
        </div>
    </div>

    <div id="row2">    
        <div>
            <img src="images/cyan.gif" alt="" id="poster_place_4"/>
        </div>

        <div>
            <img src="images/darkgreen.gif" alt="" id="poster_place_5"/>
        </div>

        <div>
            <img src="images/green.gif" alt="" id="poster_place_6"/>
        </div>
    </div>

    <div id="row3">
        <div>
            <img src="images/orange.gif" alt="" id="poster_place_7"/>
        </div>

        <div>
            <img src="images/pink.gif" alt="" id="poster_place_8"/>
        </div>

        <div>
            <img src="images/purple.gif" alt="" id="poster_place_9"/>
        </div>
    </div>

</div>

<script type="text/javascript" charset="utf-8">


function Shuffle(o) {
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};


document.onclick = function()
{
    var testArray = ["poster_place_1","poster_place_2","poster_place_3","poster_place_4","poster_place_5","poster_place_6","poster_place_7","poster_place_8","poster_place_9"];
    Shuffle(testArray);
    document.getElementById("poster_place_9").id = testArray[0];
    document.getElementById("poster_place_8").id = testArray[1];
    document.getElementById("poster_place_7").id = testArray[2];
    document.getElementById("poster_place_6").id = testArray[3];
    document.getElementById("poster_place_5").id = testArray[4];
    document.getElementById("poster_place_4").id = testArray[5];
    document.getElementById("poster_place_3").id = testArray[6];
    document.getElementById("poster_place_2").id = testArray[7];
    document.getElementById("poster_place_1").id = testArray[8];

}
</script>

and this is the css:

#poster_place_1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

#poster_place_2 {
    position: absolute;
    left: 167px;
    top: 0px;
}

#poster_place_3 {
    position: absolute;
    left: 334px;
    top: 0px;
}

#poster_place_4 {
    position: absolute;
    left: 0px;
    top: 167px;
}

#poster_place_5 {
    position: absolute;
    left: 167px;
    top: 167px;
}

#poster_place_6 {
    position: absolute;
    left: 334px;
    top: 167px;
}

#poster_place_7 {
    position: absolute;
    left: 0px;
    top: 334px;
}

#poster_place_8 {
    position: absolute;
    left: 167px;
    top: 334px;
}

#poster_place_9 {
    position: absolute;
    left: 334px;
    top: 334px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using the element id to store the image’s location; however, the id needs to be unique in HTML. When reassigning ids, what’s happening is that temporarily there are simultaneous duplicate ids. For example, if testArray[0] is poster_place_1, after this line

    document.getElementById("poster_place_9").id = testArray[0];

    there are two poster_place_1s in the HTML. The getter appears to take the first one it finds, and since Purple is the bottommost in the HTML, it is never getting replaced when it happens to be last in the series of getElementById calls (that is, in position “poster_place_1”, the top left corner), because either there’s another color with poster_place_1 above it, or it’s already in that location.

    I can suggest two changes, first, to set up temporary ids for position reassignment, which will not result in duplicates, then after all new positions are assigned, change them again to the right ids. I do this in this demo. Because I don’t have your images, the colors are replaced with a number from 51-59. The temporary names are simply the number.

    Alternatively, you can restructure the code and use class to store the positions, and id to store the color names. Then you won’t need a temporary variable because you are directly matching ids to classes. I do have to warn you about cross-browser confusion when re-assigning classes. Some methods I found recommend className, others add and remove classes (which seems overly complicated to me).

    • 0