JavaScript可点击网格

Question

I want to create a grid of arbitrary size, where within each grid square there is a green button. If I click on one of the green buttons, it should turn red, and if it's already red then I want it to turn back to the green. Obviously clicking on one square should only cause it to turn green/red and not affect any other squares.

Right now, I am able to create a grid of arbitrary size, but the problem is that for whatever reason every square in the grid starts off as red (when they should start off as green) AND when I click on any square, nothing happens.

I'll include my code below. Right now, I'm using a double for loop to create a few nested div's (for formatting reasons) and then I add an image inside the nested div's of a green square.

Any help is much appreciated and if you need any clarifications don't hesitate to let me know! :)

Javascript code:

function changeSquare(inputImage) {
    var image = document.getElementById(inputImage);

    // If image is currently green square, change to red, and vice versa
    if (image.src.match("http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png")) {
        image.src = "http://www.clker.com/cliparts/1/J/s/o/7/y/red-square-button-md.png";
    } else {
        image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png";
    }
};

function printInfo(inputImage) {
    document.getElementById("info").innerHTML = "Info:" + inputImage + "<br /> <br /> <br />";
};

//Creates a grid of dimensions width by height
function makeGrid(height, width) {

    // Loop over height and width to create black square objects with
    // buttons in middle
    for (i = 0; i < height; i++) {
        for (j = 0; j < width; j++) {

            // Outer div is black square
            var div = document.createElement("div");
            div.className = "square";
            div.id = ("div").concat(i,",", j);

            var innerDiv0 = document.createElement("div");
            innerDiv0.className = "content";
            div.id = ("innerDiv0").concat(i,",", j);
            div.appendChild(innerDiv0);

            // InnerDiv1 & 2 are table structures (necessary for alignment)
            var innerDiv1 = document.createElement("div");
            innerDiv1.className = "table";
            div.id = ("innerDiv1").concat(i,",", j);
            innerDiv0.appendChild(innerDiv1);

            var innerDiv2 = document.createElement("div");
            innerDiv2.className = "table-cell";
            div.id = ("innerDiv2").concat(i,",", j);
            innerDiv1.appendChild(innerDiv2);

            // Add green square image
            var image = document.createElement("img");
            image.id = ("image").concat(i,",", j);
            image.src = "http://www.clker.com/cliparts/b/d/4/F/W/N/green-square-button-md.png"; 
            image.className = "rs";
            innerDiv2.appendChild(image);
            document.body.appendChild(div);

            // Add onclick feature. I've tried using different methods
            // and putting it above the appendChild line, but nothing seems
            // to work.
            image.onclick = changeSquare(image.id);
        }
    }
};

makeGrid(20, 20);

CSS:

.square {
    float:left;
    position: relative;
    width: 5%;
    padding-bottom: 2.8125%;
    background-color:#1E1E1E;
    overflow:hidden;
    outline: 1px solid #FFFFFF;
}

/*
 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%
    */

.content {
    position:absolute;
    height:40%;
    width:47%;
    padding: 5% 26.5%;
    text-align:center;
}

.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}

.table{
    display:table;
    height:100%;
    width:100%;
}

.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}

body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #000000;
    background:#ECECEC;
}

.numbers{
    font-weight:900;
    font-size:100px;
}

HTML:

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

<body>

    <div id="info"> hello
    </div>

    <script src="GridTest.js"></script>

</body>

Picture of what I am trying to do:

Answer 1

Here's a working fiddle: JSFiddle

The only changes were a) to remove the (image.id) from the line where you add the onclick event to the image and b) to update the changeSquare method to get the id of the caller ( this.id ) instead of expecting it to be passed in ( inputImage ).

Answer 2

When I look at this I wonder, why don't you use an on and off class in the css and give these the images of the buttons as background. This saves you from a whole lot of extra javascript actions. I'd recommend using jQuery for this btw.

Now when that's done, add an onclick effect to the div and make it toggle the on and off class of itself.