Question

我想更改单击的div元素的颜色。如果我更改颜色，则将颜色转移到每个下一个单击div。如何单击div元素以更改该div元素的颜色。首先单击一些div，然后更改颜色？

<html>
<head>
<style> 
html, body {
    overflow: display;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
}

#some_id1{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id2{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id3{
  width: 50px;
height: 50px;
background-color: red;
}

#some_id4{
  width: 50px;
height: 50px;
background-color: red;
}

</style>
</head>
<body>
<input type="color" id="divbackgroundcolor" onchange="myFunction()">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>

<script>

var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i <= divCount; i += 1) {
    div[i].onclick = function(e) {
        var x = document.getElementById("divbackgroundcolor").value;
        document.getElementById(this.id).style.backgroundColor = x;
    };
}


</script>

</body>
</html>

Answer 1

您的代码可以正常工作，循环中只有一个错误，您循环执行直到i <= divCount，这将超过div的长度。另外，您不需要onchange上的divbackgroundcolor函数。请参见下面的工作代码。

var div = document.getElementsByTagName("div");
var divCount = div.length;
for (var i = 0; i < divCount; i += 1) { // changed to i < divCount
  div[i].onclick = function(e) {
    var x = document.getElementById("divbackgroundcolor").value;
    document.getElementById(this.id).style.backgroundColor = x;
  };
}

#some_id1 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id2 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id3 {
  width: 50px;
  height: 50px;
  background-color: red;
}

#some_id4 {
  width: 50px;
  height: 50px;
  background-color: red;
}

<input type="color" id="divbackgroundcolor">
<div id="some_id1"></div>
<div id="some_id2"></div>
<div id="some_id3"></div>
<div id="some_id4"></div>
<div id="some_id5"></div>

Answer 2

您的示例只有错误：

在HTML中，删除“输入”中的“ onclick”

在JS中，您的“ for”循环使用“ i

只需更改这些行即可使用！

Answer 3

好吧，所以首先，我不明白为什么您在每个div上都使用id，而每个div具有相同的样式。最好在课堂上做

第二，我稍微看了一下，发现人们所做的就是隐藏颜色选择器（input）并在单击时触发它。

在您的代码段中，它看起来像这样：

var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        clickedDivId = this.id
        document.getElementById("divbackgroundcolor").click()
    };
}

function colorChange(){
  var x = document.getElementById("divbackgroundcolor").value;
  document.getElementById(clickedDivId).style.backgroundColor = x;
}

html, body {
  overflow: display;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: white;
}
#divbackgroundcolor {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.some_style {
  width: 50px;
  height: 50px;
  background-color: red;
}

<input type="color" id="divbackgroundcolor" onchange="colorChange()">
<div class="some_style" id="some_id1"></div>
<div class="some_style" id="some_id2"></div>
<div class="some_style" id="some_id3"></div>
<div class="some_style" id="some_id4"></div>
<div class="some_style" id="some_id5"></div>

请注意，我所做的操作已保存单击的div的ID，因此我可以知道我单击的div。希望这是您正在寻找的答案。

祝你好运。

将颜色更改为单击的元素

3 个答案: