两个html框的颜色与辅助表单不同
两个html框的颜色与辅助表单不同
提问于 2019-03-04 08:23:03
我有一张html表格。我有一个自定义弹出式窗体与颜色。我想单击一个框并选择一种颜色，然后单击第二个框并选择另一种不同的颜色。它用于将颜色传回主页，但它会将两个框更改为相同的颜色。当我单击第二个框时，它也会将两个框更改为相同的颜色。我尝试为第二个框添加另一个函数，但它仍然为两个框着色。
我认为问题出在window.addeventlistener上。我尝试了一系列不同的方法，在第二个集合中使用所有新变量，但都没有解决这个问题。您的帮助我们将不胜感激。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8">
<style>
.wrapper {
display: grid;
/*grid-template-columns: 50px 50px 50px;*/
grid-template-columns: repeat(10,45px);
grid-gap: 2px;
}
.form-popup {
display: none;
position: relative;
/* bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;*/
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
.colorme {
width: 40px;
height: 20px;
display: inline-block;
cursor: pointer;
display: flex;
border-radius: 3px;
padding: 2px;
font-size: 100%;
}
.color-box {
cursor: pointer;
width: 25px;
height: 25px;
display: inline-block;
background-color: #ccc;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .5);
}
</style>
<body>
<script>
window.addEventListener("DOMContentLoaded", function() {
var colorcode = ""
let boxes = document.querySelectorAll(".colorme");
Array.from(boxes, function(box) {
box.addEventListener("click", function() {
colorcode = (this.classList[1]) //this gets the hex of the color selected
document.getElementById("color-box").style.backgroundColor=colorcode;
closeForm();
});
});
});
//try to just color the second box
window.addEventListener("DOMContentLoaded", function() {
var colorcode = ""
let boxes = document.querySelectorAll(".colorme");
Array.from(boxes, function(box) {
box.addEventListener("click", function() {
colorcode = (this.classList[1]) //this gets the hex of the color selected
document.getElementById("color-box2").style.backgroundColor=colorcode;
closeForm();
});
});
});
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
<form id = "inputform">
<table>
<tr> <td>
<div class="input-color">
<div id="color-box" class="color-box" style="background-color: #FF850A;" onclick="openForm()"></div>
</div></td>
<tr><td>
<div class="input-color">
<div id="color-box2" class="color-box" style="background-color: #FF850A;" onclick="openForm()"></div>
</div></td></tr>
</table>
<!--pop up form here-->
<div class="form-popup" id="myForm">
<form class="form-container">
<h5>Color Picker</h5>
<div class="wrapper">
<!--<div class="chartmobile" style="height:630px;width:678px;display:inline-block;">-->
<div class="colorme_2 #ffebee" style="background: #ffebee"><span class="code"></span></div>
<div class="colorme #ffcdd2" style="background: #ffcdd2"><span class="code"></span></div>
<div class="colorme #ef9a9a" style="background: #ef9a9a"><span class="code"></span></div>
<div class="colorme #e57373" style="background: #e57373"><span class="code"></span></div>
<div class="colorme #ef5350" style="background: #ef5350"><span class="code"></span></div>
<div class="colorme #f44336" style="background: #f44336"><span class="code"></span></div>
<div class="colorme #e53935" style="background: #e53935"><span class="code"></span></div>
<div class="colorme #d32f2f" style="background: #d32f2f"><span class="code"></span></div>
<div class="colorme #c62828" style="background: #c62828"><span class="code"></span></div>
<div class="colorme #b71c1c" style="background: #b71c1c"><span class="code"></span></div>
</div>
</form>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-04 10:38:20
无论你有多少个颜色框，这应该都能起作用。我还添加了一个免责声明，这可能不是很完美，但它可以工作JSFiddle
window.addEventListener("DOMContentLoaded", function () {
// Load all color-boxes into an array of objects
let colorBoxes = document.getElementsByClassName('color-box');
var clicked;
// Add the onclick events on each one.
for (var i = 0; i < colorBoxes.length; i++) {
colorBoxes[i].addEventListener("click", function () {
// store the id of the clicked color-box div to reference later
clicked = this.id;
console.log(clicked + " was clicked...");
openForm();
});
}
var colorcode = "";
let boxes = document.querySelectorAll(".colorme");
Array.from(boxes, function (box) {
box.addEventListener("click", function () {
colorcode = (this.classList[1]) //this gets the hex of the color selected
// Now use the id of the clicked element to apply the style
document.getElementById(clicked).style.backgroundColor = colorcode;
closeForm();
});
});
});
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54975171
复制相关文章
相似问题