I have 3 divs as colors to choose from and 3 blank divs. I want to let the user be able to:
(1) click a colored div and then a blank div, then the blank div is colored as the color the user choose. And the code seems to work.
(2) I want the user to be able to click the colored blank div again and it becomes white. And the code seems to work.
The problem is, if the blank div is colored and the user choose another color and click the colored blank div again, a newer color class will be added to the div, and things become unpredictable. You can open the console and track the messy change of the class of the blank div.
How can I solve this problem? I only want the blank divs to toggle between two classes.
var chosenColor;
function pickColor(arg){
chosenColor=arg.id;
}
function draw(id){
document.getElementById(id).classList.toggle("white");
document.getElementById(id).classList.toggle(chosenColor);
}
.box{
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.red{background: red}
.blue{background: blue;}
.yellow{background: yellow;}
.white{background: white;}
<html>
<body>
<div class="box red" id="red" onclick="pickColor(this)">1</div>
<div class="box blue" id="blue" onclick="pickColor(this)">2</div>
<div class="box yellow" id="yellow" onclick="pickColor(this)">3</div>
<br><br>
<div class="box white" id="4" onclick="draw(4)">4</div>
<div class="box white" id="5" onclick="draw(5)">5</div>
<div class="box white" id="6" onclick="draw(6)">6</div>
</body>
</html>
Check to see if the element's classname
is white
. If not, set its class name to white
- else, set it to the chosen color. You can put the boxes in a container and use .container > div
selector, removing the need to give the boxes the .box
class. Also, in a listener, this
will refer to the clicked element - there's no need to use getElementById
when you already have a reference to the element.
var chosenColor;
function pickColor(arg) {
chosenColor = arg.id;
}
function draw(element, id) {
if (element.className !== 'white') element.className = 'white';
else element.className = chosenColor;
}
.container > div {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
}
.red {
background: red
}
.blue {
background: blue;
}
.yellow {
background: yellow;
}
.white {
background: white;
}
<div class="container">
<div class="red" id="red" onclick="pickColor(this)">1</div>
<div class="blue" id="blue" onclick="pickColor(this)">2</div>
<div class="yellow" id="yellow" onclick="pickColor(this)">3</div>
<br><br>
<div class="white" id="4" onclick="draw(this, 4)">4</div>
<div class="white" id="5" onclick="draw(this, 5)">5</div>
<div class="white" id="6" onclick="draw(this, 6)">6</div>
</div>
Instead of using classes and running into the issue of assigning multiple nested classes or having to use complicated white logic...
I'd use data-*
attribute:
var chosenColor;
function pick(el) {
chosenColor = el.dataset.color;
}
function draw(el) {
el.dataset.color = el.dataset.color ? "" : chosenColor;
}
body { background: #eee; }
.box {
width: 100px;
height: 100px;
border: 1px solid black;
display: inline-block;
background: white; /* BY DEFAULT !!! */
}
[data-color=red] { background: red; }
[data-color=blue] { background: blue; }
[data-color=yellow] { background: yellow; }
<div class="box" onclick="pick(this)" data-color="red">1</div>
<div class="box" onclick="pick(this)" data-color="blue">2</div>
<div class="box" onclick="pick(this)" data-color="yellow">3</div>
<br><br>
<div class="box" onclick="draw(this)">4</div>
<div class="box" onclick="draw(this)">5</div>
<div class="box" onclick="draw(this)">6</div>
I wrote the following code in JS var d = new Date(2019, 9, 14); var currentTime = d.getTime(); var daysToAdd = 3; var secondsInDay = 86400; var d = new Date(currentTime + daysToAdd*...
I wrote the following code in JS var d = new Date(2019, 9, 14); var currentTime = d.getTime(); var daysToAdd = 3; var secondsInDay = 86400; var d = new Date(currentTime + daysToAdd*...
I am building a web portal with solidity contract integration. In the contract, I have saved the date in uint from like this 1539491531. When I show it on the web page it looks like this: It showing ...
I am building a web portal with solidity contract integration. In the contract, I have saved the date in uint from like this 1539491531. When I show it on the web page it looks like this: It showing ...
I'm struggling with ui-router configuration which will define basic CRUD in the application. I need to be able to add, remove, edit and search for, say, clients. Quite basic task. Main page with ...
I'm struggling with ui-router configuration which will define basic CRUD in the application. I need to be able to add, remove, edit and search for, say, clients. Quite basic task. Main page with ...
I am a student and very new to JS, like this is my first project dealing with it. With that being said, please excuse how juvenile my coding may seem to you experts. I followed the instructions of my ...
I am a student and very new to JS, like this is my first project dealing with it. With that being said, please excuse how juvenile my coding may seem to you experts. I followed the instructions of my ...