Change the color to the clicked element
Question
I want to change the color of the clicked div element. If I change the color with the color is transferred to each next click div. How to click on the div element to change the color of that div element. First click on some div and then change color?
<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>
3 answers
solution1
0 2019-05-13 08:58:56
Your code works fine, there's just an error in your loop where you loop till i <= divCount , which would be more than the length of div . Also, you don't need an onchange function on the divbackgroundcolor . See working code below.
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>
solution2
0 2019-05-13 09:00:09
Your example have only to mistakes:
In HTML remove the "onclick" in your "input"
And in JS your "for" loop use "i < divCount"
Change just those lines and will work!
solution3
0 ACCPTED 2019-05-13 09:34:15
Ok, so first, I don't understand why are you using id on each div, while you are having the same style for each. better do it with class
Secondly, I have looked it up a little, and what I discovered people do, is just hide the color picker ( input ) and trigger it on click.
In your piece of code, it would look something like this:
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>
Notice that what I did is saved the id of the div I clicked on, so I could tell on which div I have clicked. Hope that is the answer you are looking for.
Good luck.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.