modify the color of a box within a grid upon clicking it

Question

modify the color of a box within a grid upon clicking it

I am curious if it is possible to change the color of a box when it is clicked.

I am working on coding a "calculator layout" and would like to start with this part

This is what I have been working on and struggling with.

$(document).ready(function() {
  $("#k1").click(function() {
    $("#k1").backgroundcolor = 'red';
  });
});

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #c5c5c5;
  padding: 10px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}

.it0 {
  grid-column-start: 2;
  grid-column-end: 3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-container">
  <div id="k1" class="it1">1</div>
  <div id="k2" class="it2">2</div>
  <div id="k3" class="it3">3</div>
  <div id="k0" class="it0">0</div>
</div>

javascript html jquery css

Answer 1

Answer №1

Your coding skills are definitely improving! However, there are some minor adjustments required in your JavaScript code. Here is the revised version of your code that will modify the color of a box upon clicking:

$(document).ready(function() {
  $("#k1").click(function(){
    $(this).css('background-color', 'red'); // Update the background color of the clicked element
  });
});

In the given snippet, $(this) specifically targets the clicked element, and .css('background-color', 'red') is utilized to change its background color to red after being clicked.

You can follow a similar methodology for other boxes too. For instance, if you wish to alter the color of the box with id k2 to blue upon clicking, implement the following lines of code:

$("#k2").click(function(){
  $(this).css('background-color', 'blue');
});

This same technique can be replicated for the remaining boxes to adjust their background colors upon clicking as necessary.

Answer 2

Your coding skills are definitely improving! However, there are some minor adjustments required in your JavaScript code. Here is the revised version of your code that will modify the color of a box upon clicking:

$(document).ready(function() {
  $("#k1").click(function(){
    $(this).css('background-color', 'red'); // Update the background color of the clicked element
  });
});

In the given snippet, $(this) specifically targets the clicked element, and .css('background-color', 'red') is utilized to change its background color to red after being clicked.

You can follow a similar methodology for other boxes too. For instance, if you wish to alter the color of the box with id k2 to blue upon clicking, implement the following lines of code:

$("#k2").click(function(){
  $(this).css('background-color', 'blue');
});

This same technique can be replicated for the remaining boxes to adjust their background colors upon clicking as necessary.

modify the color of a box within a grid upon clicking it

Answer №1

Similar questions

Utilizing JQuery for a smooth animation effect with the slide down feature

Adding the data from an ajax object response to an array

Utilizing Python and Selenium for Xpath, extracting text from a span tag within a web table

Guide on displaying an X mark on a checkbox in AngularJS when the ng-disabled value is set to true

Spinning a tetrahedron in three.js along the proper axis

Is there a way to expand the navbar to full width?

Change UL to a JSON format

Activate a button with jQuery when a key is pressed

Pinia alert: The function "getActivePinia()" was invoked without an active Pinia instance. Could it be possible that you overlooked installing Pinia?

The 'import' statement is not functioning properly within a script in the rendered HTML

Hidden Document Scroll Offset

PHP Ajax Tutorial - Sending an HTTP request and displaying the retrieved data

Are there any small JavaScript libraries designed for handling HTML5 history?

Issue: The system is unable to locate the module labeled './lib/binding/napi-v3/argon2.node'

Click on an element using jQuery to apply a specific class to all other similar

Excess gap detected in dual-column design

IE encounters an absolute z-index problem when expanding concealed content

Halting a function within a specific namespace

Tips for transferring a JavaScript object to a Node.js server

The three.js library is throwing an error because it is unable to access the 'geometry' property of an