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

Creating an HTML table syntax from a PHP 2-dimensional array

Incorrect formatting of HTML emails in Outlook

Steps for adding JSON array information to the tbody of an HTML table

Ensuring Radiobuttons are Selected on a Page After Clicking the Submit Button

Guide to showcasing an image on an HTML page using HTTP header

What is the best way to replicate a synchronous ajax call? (mimicking synchronous behavior with asynchronous methods)

Translate a jQuery ajax request utilizing jQuery().serialize into plain JavaScript

Transferring information through AJAX and fetching through PHP

What methods are available for parsing JSON data into an array using JavaScript?

Tomcat encounters difficulty accessing the JavaScript directory

Preserve jQuery-enhanced webpage changes permanently

Get rid of the spaces in web scraping <tr> tags using Node.js

Error encountered: 'applePaySession.completeMerchantValidation' is not a valid object reference when attempting to process a successful apple pay payment

The problem with Ajax POST is occurring in Firefox and Chrome, but not in IE8

What is the process for mediating a SWF-Flash file with a PHP mediating, also known as an HTTP-Pseudostreaming script?

Having trouble setting a value for a textbox in angularjs

Utilizing JavaScript variables imported from an external library in Next.js: A Guide

Utilize JavaScript libraries in a TypeScript project

Prevent the loading of a <img> element and replace it with a new one using CSS

Using percentages for sizing and margins in CSS