I'm trying to set the background of a div when it is clicked, and then when it is clicked again it reverses back to no color.
Here is my code:
<div class="wrapper">
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(107, 1fr);
grid-template-rows: repeat(59, 1fr);
grid-gap: 0px;
}
.wrapper div {
padding: 5px;
background-color: none;
text-align: center;
border: 0.001px solid black;
font-size: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper div:hover {
background: white;
}
function set() {
var squares = document.getElementById('square');
for (var i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = "none";
}
if (squares[i].style.backgroundColor === "none") {
squares[i].style.backgroundColor = "white";
} else {
squares[i].style.backgroundColor = "none";
}
}
When I click the div it doesn't do anything. My javascript code isn't working, how should I change it so it makes the div background white when clicked and then none when clicked again.
You can put an event listener on the parent element that listens for the click event. When it gets a click event, if it is from one of the squares, toggle a class to keep the background color on it. If it already has that class, it will be removed.
document.querySelector('.squares').addEventListener('click', e => {
if (e.target.classList.contains('square')) {
e.target.classList.toggle('selected');
}
});
.wrapper {
display: grid;
grid-template-columns: repeat(107, 1fr);
grid-template-rows: repeat(59, 1fr);
grid-gap: 0px;
}
.wrapper div {
padding: 5px;
background-color: none;
text-align: center;
border: 0.001px solid black;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .square:hover, .square.selected {
background: white;
}
body { background-color: #888; }
<div class="wrapper squares">
<div class="square">A</div>
<div class="square">B</div>
<div class="square">C</div>
<div class="square">D</div>
<div class="square">E</div>
<div class="square">F</div>
<div class="square">G</div>
</div>
Your primary issue is this:
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
<div onclick="set()" id="square"></div>
It's invalid to have the same id on more than one element. An id must be unique. So this line:
var squares = document.getElementById('square');
just selects the first div and then later, when you try to loop over all the cells, you don't because you never had all of the cells in the first place.
You just need to set one click handler on the parent of all the div cells. Then, in that handler, you can apply a CSS class to the div that triggered the event. This is called event delegation and works because events bubble up through the DOM.
// Get a reference to all the cells
let squares = document.querySelectorAll("div.wrapper > div");
// Set up you event handlers in JavaScipt, not with inline HTML
// event attributes like onclick
document.querySelector(".wrapper").addEventListener("click", function(event) {
// Remove all the background colors from all the cells
squares.forEach(function(square){
square.classList.remove("activeCell");
});
// Apply backgroun to clicked cell
event.target.classList.add("activeCell");
});
.wrapper {
display: grid;
grid-template-columns: repeat(107, 1fr);
grid-template-rows: repeat(59, 1fr);
grid-gap: 0px;
}
.wrapper > div {
padding: 5px;
background-color: none;
text-align: center;
border: 0.001px solid black;
font-size: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper div:hover {
background: green;
}
.activeCell {
background-color:blue;
}
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related
I have 20 element for a grid view. But I want only 3✕3 grid view, where there will be only 9 element in the view window. And the rest of the element should be placed in the right side of the window as a scrollable asset.**
No matter what the screen size is I want to show only the first 9 element in the grid.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
In this case the grid should flow vertically. And you can set it up like this with some calculation:
.cards {
/* how many columns on the first screen */
--cols: 3;
/* how many rows on the first screen */
--rows: 3;
/* grid gap */
--gap: 5px;
--width: calc((100% - var(--gap) * (var(--cols) - 1)) / var(--cols));
display: grid;
position: relative;
grid-auto-flow: column dense;
grid-template-rows: repeat(var(--rows), 1fr);
grid-auto-columns: var(--width);
grid-gap: var(--gap);
overflow-x: auto;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
<div class="card">THIRTEEN</div>
<div class="card">FOURTEEN</div>
</div>
.cards {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.card {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
</div>
A simple way to achieve this is by using nth-child CSS selector on your card class. Since, you want to display only he first 9 cards in the container, you will have to hide the cards from 10th position onwards.
Consider :nth-child(an + b). Here, the term b is the offset that you can specify to target cards. If you remove a and substitute the value of b as 10, it will target all the cards that appear as 10th child and later. The selector will be like so: :nth-child(n + 10). This is a comparatively readable solution.
Bonus Tip: To make sure the cards show up as 3 x 3 grid, you can explicitly update grid-template-columns CSS property to be repeat(3, 1fr) instead of repeat(auto-fill, minmax(150px, 1fr))
This is the final snippet:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.card {
background-color: dodgerblue;
color: white;
padding: 1rem;
height: 4rem;
}
/* Hide card which occurs at 10th position and above */
.card:nth-child(n + 10) {
display: none;
}
<div class="cards">
<div class="card">ONE</div>
<div class="card">TWO</div>
<div class="card">THREE</div>
<div class="card">FOUR</div>
<div class="card">FIVE</div>
<div class="card">SIX</div>
<div class="card">SEVEN</div>
<div class="card">EIGHT</div>
<div class="card">NINE</div>
<div class="card">TEN</div>
<div class="card">ELEVEN</div>
<div class="card">TWELVE</div>
</div>
I use this tool and it makes everything easier : https://cssgrid-generator.netlify.app/
You just select wich grid you want, how many rows... and it gives you the css + html :)
I'm working on a word guessing game, and when the user clicks a letter on the visual keyboard I've created, I want the background color of that letter to change (light green if correctly guessed, grey if incorrect). However, the default background (set with 'letter' class) doesn't seem to get replaced properly after clicking. Instead, an unstyled box (no border radius etc.) with the new background color overlays the default background color (it's visually obvious). I'm interested to know why this happens. Could someone please enlighten me? Is this a known phenomenon? Or is it to do with my event and use of e.target?
Please see my HTML, CSS & Javascript below.
const currentWord = "abc"
$('.keyboard .row .letter').click(function(e) {
// Check if 'currentWord' contains clicked letter
let check = [];
currentWord.split('').forEach(function(letter, i) {
let clickedLetter = e.target.firstChild.textContent.toLocaleUpperCase();
if(clickedLetter === letter.toLocaleUpperCase()) {
// Change background of correctly guessed letter
$(e.target).css('background-color','lightgreen');
// Make letter appear in letter box
$(`#${letter} .word-letter`).text(clickedLetter).fadeOut(1).fadeIn(250);
check.push(1);
} else if((i === currentWord.length - 1) && !check.length) {
// Change background of incorrectly guessed letter
$(e.target).css('background-color', 'grey');
}
})
})
/* KEYBOARD */
.keyboard {
grid-column: 2/5;
grid-row: 6/8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(223, 255, 196);
}
.row {
height: 40%;
width: 100%;
font-size: 2em;
display: flex;
justify-content: center;
}
.letter {
text-align: center;
width: 5%;
background-color: rgb(158, 228, 255);
margin: 1%;
border-radius: 10px;
box-shadow: 3px 3px lightgray;
}
.letter:hover {
background-color: rgb(255, 138, 255);
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="keyboard">
<div class="row">
<div class="letter"><p>Q</p></div>
<div class="letter"><p>W</p></div>
<div class="letter"><p>E</p></div>
<div class="letter"><p>R</p></div>
<div class="letter"><p>T</p></div>
<div class="letter"><p>Y</p></div>
<div class="letter"><p>U</p></div>
<div class="letter"><p>I</p></div>
<div class="letter"><p>O</p></div>
<div class="letter"><p>P</p></div>
</div>
<div class="row">
<div class="letter"><p>A</p></div>
<div class="letter"><p>S</p></div>
<div class="letter"><p>D</p></div>
<div class="letter"><p>F</p></div>
<div class="letter"><p>G</p></div>
<div class="letter"><p>H</p></div>
<div class="letter"><p>J</p></div>
<div class="letter"><p>K</p></div>
<div class="letter"><p>L</p></div>
</div>
<div class="row">
<div class="letter"><p>Z</p></div>
<div class="letter"><p>X</p></div>
<div class="letter"><p>C</p></div>
<div class="letter"><p>V</p></div>
<div class="letter"><p>B</p></div>
<div class="letter"><p>N</p></div>
<div class="letter"><p>M</p></div>
</div>
</div>
That is because you are setting the background-color on e.target which might not be the element with the letter class. The event target is the element that was actually clicked and can be a child (e.g. the p tag). This happens because events bubble up the dom and trigger any listeners that they encounter. To get the element on which the event listener is attached use e.currentTarget
const currentWord = "abc"
$('.keyboard .row .letter').click(function(e) {
// Check if 'currentWord' contains clicked letter
let check = [];
currentWord.split('').forEach(function(letter, i) {
let clickedLetter = e.currentTarget.firstChild.textContent.toLocaleUpperCase();
if(clickedLetter === letter.toLocaleUpperCase()) {
// Change background of correctly guessed letter
$(e.currentTarget).css('background-color','lightgreen');
// Make letter appear in letter box
$(`#${letter} .word-letter`).text(clickedLetter).fadeOut(1).fadeIn(250);
check.push(1);
} else if((i === currentWord.length - 1) && !check.length) {
// Change background of incorrectly guessed letter
$(e.currentTarget).css('background-color', 'grey');
}
})
})
/* KEYBOARD */
.keyboard {
grid-column: 2/5;
grid-row: 6/8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(223, 255, 196);
}
.row {
height: 40%;
width: 100%;
font-size: 2em;
display: flex;
justify-content: center;
}
.letter {
text-align: center;
width: 5%;
background-color: rgb(158, 228, 255);
margin: 1%;
border-radius: 10px;
box-shadow: 3px 3px lightgray;
}
.letter:hover {
background-color: rgb(255, 138, 255);
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="keyboard">
<div class="row">
<div class="letter"><p>Q</p></div>
<div class="letter"><p>W</p></div>
<div class="letter"><p>E</p></div>
<div class="letter"><p>R</p></div>
<div class="letter"><p>T</p></div>
<div class="letter"><p>Y</p></div>
<div class="letter"><p>U</p></div>
<div class="letter"><p>I</p></div>
<div class="letter"><p>O</p></div>
<div class="letter"><p>P</p></div>
</div>
<div class="row">
<div class="letter"><p>A</p></div>
<div class="letter"><p>S</p></div>
<div class="letter"><p>D</p></div>
<div class="letter"><p>F</p></div>
<div class="letter"><p>G</p></div>
<div class="letter"><p>H</p></div>
<div class="letter"><p>J</p></div>
<div class="letter"><p>K</p></div>
<div class="letter"><p>L</p></div>
</div>
<div class="row">
<div class="letter"><p>Z</p></div>
<div class="letter"><p>X</p></div>
<div class="letter"><p>C</p></div>
<div class="letter"><p>V</p></div>
<div class="letter"><p>B</p></div>
<div class="letter"><p>N</p></div>
<div class="letter"><p>M</p></div>
</div>
</div>
i found jQuery code that prints out the div that is clicked inside a grid, how can i modify this code so that it adds class ".active" only to the div .grid_item that has been clicked, can somebody help me understand how to do this?
I have added the html and js down below.
$(".grid").click(function(event) {
var hoveredGridItems = $(this).children()
.filter(function() { return $(this).is(":hover"); });
if (hoveredGridItems.length > 0)
console.log(hoveredGridItems[0]);
else
console.log("no element detected!");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
$(".grid__item").click(function(event) {
$(".grid__item").removeClass("active");
$(event.currentTarget).addClass("active");
});
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
}
/* styles just for demo */
.grid__item {
background-color: tomato;
color: white;
/* styles for centering text */
display: flex;
align-items: center;
justify-content: center;
}
.grid__item.active {
border: 1px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>
Easiest way is to set an event handler on the individual "grid__item", not on the whole grid (rather than using the hover method which is a bit overly complex).
Then you can use the currentTarget of the event to get the item clicked to add the class. I also, before that, remove that active class from all the grid items so only the most recently clicked gets the class.
I was trying hard to open a modal on button click to display the calendar date and time also but nt getting anything. can any one share your knowledge.
i added the sample image how i want to display it.
Since you gave an image as an example I thought you wanted to create that exact look.
The following should work inside your modal.
const dateInput = document.getElementById('input-date');
const displayDate = document.getElementById('currentDate');
// init view
(() => {
let date = new Date().toISOString().slice(0, 10);
dateInput.value = date;
displayDate.innerText = date;
})();
.wrapper {
padding: 1rem;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
#time-picker {
padding: 1rem;
border: 1px solid #000;
-webkit-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
text-align: center
}
#header-row {
display: grid;
grid-template-columns: 2fr 1fr;
}
#data-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.bordered {
border: 1px solid #000;
margin: 1rem;
}
#time-picker .bordered > div {
margin: 0.5rem;
}
#time-picker > a {
width: 100%;
}
#currentDate {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
#button-row {
display: flex;
flex-flow: row nowrap;
justify-content: space-evenly;
align-items: center;
}
<div id="outer">
<div class="wrapper">
<label for="input-date">Need Date</label>
<input type="date" id="input-date">
</div>
<div id="time-picker">
<div id="header-row">
<div>Hours of Day</div>
<div>Minutes</div>
</div>
<div id="data-row">
<div class="bordered">
<div>00</div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
</div>
<div class="bordered">
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
</div>
<div class="bordered">
<div>00</div>
<div>05</div>
<div>10</div>
<div>15</div>
<div>20</div>
<div>25</div>
<div>30</div>
<div>35</div>
<div>40</div>
<div>45</div>
<div>50</div>
<div>55</div>
</div>
</div>
Clear Time
</div>
<h2 id="currentDate" class="row"></h2>
<div id="button-row">
<button>Cancel / Exit</button>
<button>Save / Exit</button>
</div>
</div>
Here is what I have created so far:
screenshot here
Basically you start off with the red div on the left with the red circle that is active on the right. When you click on the blue circle, for example, you get the div on the left to turn blue and then the blue circle gets active and the red circle gets inactive. Here is how it looks after clicking on the blue circle: screenshot here
And of course, if you click on the green circle the div on the left turns green if you click on the black circle the div on the left turns black.
Here is the code:
$(document).ready(function(){
$('#circle-2').click(function(){
$(this).addClass('active-circle')
$('#circle-1').removeClass('active-circle')
$('#circle-3').removeClass('active-circle')
$('#circle-4').removeClass('active-circle')
$('.rect').removeClass('rect-1').removeClass('rect-3').removeClass('rect-4').addClass('rect-2')
})
$('#circle-1').click(function(){
$(this).addClass('active-circle')
$('#circle-2').removeClass('active-circle')
$('#circle-3').removeClass('active-circle')
$('#circle-4').removeClass('active-circle')
$('.rect').removeClass('rect-2').removeClass('rect-3').removeClass('rect-4').addClass('rect-1')
})
$('#circle-3').click(function(){
$(this).addClass('active-circle')
$('#circle-1').removeClass('active-circle')
$('#circle-2').removeClass('active-circle')
$('#circle-4').removeClass('active-circle')
$('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-4').addClass('rect-3')
})
$('#circle-4').click(function(){
$(this).addClass('active-circle')
$('#circle-1').removeClass('active-circle')
$('#circle-2').removeClass('active-circle')
$('#circle-3').removeClass('active-circle')
$('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-3').addClass('rect-4')
})
})
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.rect {
height: 50vh;
width: 100%;
}
.rect-1 {
background: red;
}
.rect-2 {
background: blue;
}
.rect-3 {
background: green;
}
.rect-4 {
background: black;
}
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: .25;
}
.circle-color-1 {
background-color: red;
}
.circle-color-2 {
background-color: blue;
}
.circle-color-3 {
background-color: green;
}
.circle-color-4 {
background-color: black;
}
.active-circle {
opacity: 1;
}
<div class="grid">
<div class="rect rect-1">
</div>
<div class="circles-container">
<div id="circle-1" class="circle circle-color-1 active-circle">Circle 1</div>
<div id="circle-2" class="circle circle-color-2">Circle 2</div>
<div id="circle-3" class="circle circle-color-3">Circle 3</div>
<div id="circle-4" class="circle circle-color-4">Circle 4</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="./index.js"></script>
Now here is where I am struggling. I want the div on the left to switch color automatically every 3 seconds and of course, the circles on the right should match that as well. So we start with the div on the left being red and the red circle on the right being active and after 3 seconds the div changes to blue and the active circle is the blue one. Basically what I have now but happening automatically without having to click on the circles and keeping the click functionality as well.
Your first priority, aside from achieving the automatic cycle through the elements, is to DRY up your code. Given that all that changes between the multiple repeated event handlers is the class you add, you can remove the id attributes and target the elements by their common .circle class. You can then bind a single event handler which works for all elements and applies the class to .rect which is stored in a data attribute on each element.
To create the cycle effect you can use setInterval(), targeting the next element from the one which currently has .active-circle. Try this:
jQuery($ => {
var $rect = $('.rect');
var $circles = $('.circle').on('click', setActiveCircle);
$circles.first().trigger('click');
function setActiveCircle() {
$circles.removeClass('active-circle');
$(this).addClass('active-circle');
$rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'));
}
setInterval(function() {
let $targetCircle = $circles.filter('.active-circle').next();
if ($targetCircle.length === 0)
$targetCircle = $circles.first();
setActiveCircle.call($targetCircle);
}, 3000);
});
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.rect {
height: 50vh;
width: 100%;
}
.rect-1 { background: red; }
.rect-2 { background: blue; }
.rect-3 { background: green; }
.rect-4 { background: black; }
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: .25;
}
.circle-color-1 { background-color: red; }
.circle-color-2 { background-color: blue; }
.circle-color-3 { background-color: green; }
.circle-color-4 { background-color: black; }
.active-circle { opacity: 1; }
<div class="grid">
<div class="rect"></div>
<div class="circles-container">
<div class="circle circle-color-1" data-rect="rect-1">Circle 1</div>
<div class="circle circle-color-2" data-rect="rect-2">Circle 2</div>
<div class="circle circle-color-3" data-rect="rect-3">Circle 3</div>
<div class="circle circle-color-4" data-rect="rect-4">Circle 4</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>