JavaScript可点击网格

我想创建一个任意大小的网格，其中每个网格正方形内都有一个绿色按钮。如果我点击其中一个绿色按钮，它应该变成红色，如果它已经是红色，那么我希望它回到绿色。显然，点击一个方块只会使它变成绿色/红色，而不会影响任何其他方块

现在，我可以创建任意大小的网格，但问题是，无论出于何种原因，网格中的每个正方形都以红色开始（当它们应该以绿色开始时），当我单击任何正方形时，什么都不会发生

我将在下面包含我的代码。现在，我正在使用double for循环创建一些嵌套div（出于格式化原因），然后在绿色正方形的嵌套div内添加一个图像

非常感谢您的帮助，如果您需要任何澄清，请随时告诉我！：）

Javascript代码：

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);

HTML:

你好

我正在尝试做的事情的图片：

---

当我看到这一点时，我想知道，为什么不在css中使用on和off类，并将按钮的图像作为背景。这将为您节省大量额外的javascript操作。我建议对这个btw使用jQuery

现在，完成后，向div添加onclick效果，并使其切换自身的打开和关闭类。

这里有一个工作提琴：

---

唯一的更改是a）从向图像添加onclick事件的行中删除

（image.id）

，b）更新

changeSquare

方法以获取调用者的id（

this.id

），而不是期望它被传入（

inputImage

）。

`image.onclick=changeSquare（image.id）；`这是你的问题。这实际上是在那里调用代码，而不是创建事件处理程序。您将能够从单击处理程序中获取图像的id。因此正确的代码应该是

image.onclick=changeSquare非常感谢！它现在可以工作了：）。我是一个有点笨手笨脚的人，所以我很抱歉问这个问题，但是我有没有办法把你的答案标记为“正确”的，或者类似的？因为如果可能的话，我想报答你的帮助。谢谢，祝你有一个美好的一天D@RohanShankar-不客气。看起来你找到了“接受答案”复选标记，谢谢！
.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;
}

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

<body>

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

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

</body>