如何使用javascript在模式中使用按钮为100个框中的一个着色

为了方便起见，我用一个简单的例子来解释我想做什么

• 我的网站上有100个使用简单html/css的框。（未显示样式）
• 我写了一点JS来打开一个模式，当点击100个盒子中的一个盒子时就会打开：class=“box”：

模态Id为“模态”：

单击任何框时，将显示模式：

    for (var i = 0; i < boxesLength; i++) {
    boxes[i].onclick = function () {
    modal.style.display = "block";
    };
    }

写“box[0]”会给第一个框上色，但这当然不是我想要的。我想给单击的框上色

谢谢你的意见。你好

应要求，我添加了som简单html

//模态
完整的
//只是一些盒子
.... 还有96箱

我相信你的问题就在这里。您有：

for（var i=0；i

，但应该是指

boxesLength

so

for（var i=0；i

）

这将是“事件委派”的理想应用程序。请阅读此处的详细信息：

---

基本上，您将单击处理程序放在所有框的父容器上，然后使用

target

指向单击框。这将为您提供1个事件处理程序，而不是100个。

我相信您的问题就在这里。您有：

for（var I=0；I

，但应指的是

boxesLength

so

for（var i=0；i

）

这将是“事件委派”的理想应用程序。请阅读此处的详细信息：

---

基本上，您将单击处理程序放在所有框的父容器上，然后使用

target

指向单击的框。这将为您提供1个事件处理程序，而不是100个。

根据我对您的问题的理解。您希望背景色显示在单击的框上，以显示模式。 这是我的解决办法

//将其作为全局变量在函数之间传递
var randomv={}
var modal=document.getElementById（“modal”）；
var close=document.querySelector（“.close”）
//全力以赴
var x=document.getElementById（“innerBox”）.querySelectorAll（“.box”）；
//对于每个框，执行以下命令
x、 forEach（框=>{
//单击每个框后，执行一个函数
box.addEventListener（“单击”），函数（）{
//这将引用父元素，在本例中，父元素是长方体
randomv.parent=这个
//单击该框时显示模式
modal.style.display=“块”；
})
});
//单击x键时隐藏模式
close.addEventListener（“单击”，函数（）{
modal.style.display=“无”
}); 
函数changeColor（）{
//首先确保每个框的背景色正常
x、 forEach（框=>{
box.style.backgroundColor=“白色”；
});
//将父元素保留为变量
var parent\u div=randomv.parent
//更改父级的背景颜色
parent_div.style.backgroundColor=“绿色”；
}

#模态{
显示：无；
}
#内箱{
宽度：100vw；
显示器：flex；
}
.盒子{
柔性生长：1；
}
.关闭，.box{
光标：指针；
}

模型内容
x
绿色
框1
框2
框3
方框4

根据我对您的问题的理解。您希望在单击的框上显示背景色，以显示模式。 这是我的解决办法

//将其作为全局变量在函数之间传递
var randomv={}
var modal=document.getElementById（“modal”）；
var close=document.querySelector（“.close”）
//全力以赴
var x=document.getElementById（“innerBox”）.querySelectorAll（“.box”）；
//对于每个框，执行以下命令
x、 forEach（框=>{
//单击每个框后，执行一个函数
box.addEventListener（“单击”），函数（）{
//这将引用父元素，在本例中，父元素是长方体
randomv.parent=这个
//单击该框时显示模式
modal.style.display=“块”；
})
});
//单击x键时隐藏模式
close.addEventListener（“单击”，函数（）{
modal.style.display=“无”
}); 
函数changeColor（）{
//首先确保每个框的背景色正常
x、 forEach（框=>{
box.style.backgroundColor=“白色”；
});
//将父元素保留为变量
var parent\u div=randomv.parent
//更改父级的背景颜色
parent_div.style.backgroundColor=“绿色”；
}

#模态{
显示：无；
}
#内箱{
宽度：100vw；
显示器：flex；
}
.盒子{
柔性生长：1；
}
.关闭，.box{
光标：指针；
}

模型内容
x
绿色
框1
框2
框3
方框4

我用“这个”算出了：

for（变量i=0；i

我用“这个”算出了：

for（变量i=0；i

你的HTML代码会很有帮助。在这里添加。我现在添加了一些，并更新了帖子，使其更加清晰。谢谢：）@Khalidkhany你的HTML代码会很有帮助。在这里添加。我现在添加了一些，并更新了帖子，使其更加清晰。谢谢：）@KhalidKhanThank感谢你的时间。这是一个无法解决的简单错误

    for (var i = 0; i < boxesLength; i++) {
    boxes[i].onclick = function () {
    modal.style.display = "block";
    };
    }

//get the coloring button in the modal which has Id of "green".

var coloring = document.getElementById("green");

coloring.onclick = function () {
boxes[i].style.backgroundColor = "#90EE90";
//closing the modal after clicking which works
modal.style.display = "none";
};

    //The modal
    <div id="modal">
            <button id="green">Completed</button>
    </div>

    //just some boxes         
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    <div class="boxes"></div>
    .... 96 more boxes

    for (var i = 0; i < boxesLength; i++) {
      boxes[i].onclick = function () {
        modal.style.display = "block";
        var koko = this;
        green.onclick = function () {
          koko.style.backgroundColor = "#90EE90";
          modal.style.display = "none";
        };
      };