Modify the background of a DIV upon clicking it

Question

Modify the background of a DIV upon clicking it

Is there a way to achieve the following scenario:

I have multiple DIVS

<div style="background-color: black;">text1</div>
<div style="background-color: black;">text2</div>
<div style="background-color: black;">text3</div>
<div style="background-color: black;">text4</div>
<div style="background-color: black;">text5</div>
<div style="background-color: black;">text6</div>

Upon clicking on the DIV containing "text5," the background color should change to RED. If the same person clicks on the DIV with "text3," the background color of text5 should revert to black and text3 should turn red. This process should continue for other DIVS as well.

In summary, the background color should switch when another DIV is clicked.

Can this be accomplished using basic JavaScript?

javascript html css

Answer 1

Answer №1

To enable interaction with div elements in Javascript, ensure that each div has appropriate classes assigned and implement an `onclick` event to detect when a div is clicked. Pass the current div as a parameter using `this` to a Javascript function called from the `onclick` event.

In the `changeColour` function triggered by the `onclick`, begin by resetting all divs to their default color using `document.getElementsByClassName` to get all divs, then iterate through them to reset the color back to default.

Once the divs have been reset and control returns to `changeColour`, proceed to change the background color of the clicked-on div (passed as a parameter).

function changeColour(item)
{
    resetColour();
    item.style.backgroundColor = 'red';
}

function resetColour()
{
    var divsToReset = document.getElementsByClassName("colouredDivs");
    for(var i=0; i < divsToReset.length; i++) 
    {
         var div = divsToReset[i];
         div.style.backgroundColor = 'black';
    }
}

<div class="colouredDivs" style="background-color: black;" onClick="changeColour(this);">text1</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text2</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text3</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text4</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text5</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text6</div>

Answer 2

To enable interaction with div elements in Javascript, ensure that each div has appropriate classes assigned and implement an `onclick` event to detect when a div is clicked. Pass the current div as a parameter using `this` to a Javascript function called from the `onclick` event.

In the `changeColour` function triggered by the `onclick`, begin by resetting all divs to their default color using `document.getElementsByClassName` to get all divs, then iterate through them to reset the color back to default.

Once the divs have been reset and control returns to `changeColour`, proceed to change the background color of the clicked-on div (passed as a parameter).

function changeColour(item)
{
    resetColour();
    item.style.backgroundColor = 'red';
}

function resetColour()
{
    var divsToReset = document.getElementsByClassName("colouredDivs");
    for(var i=0; i < divsToReset.length; i++) 
    {
         var div = divsToReset[i];
         div.style.backgroundColor = 'black';
    }
}

<div class="colouredDivs" style="background-color: black;" onClick="changeColour(this);">text1</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text2</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text3</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text4</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text5</div>
<div class="colouredDivs"  style="background-color: black;" onClick="changeColour(this);">text6</div>

Answer 3

Answer №2

Check out this solution that utilizes forEach() along with a traditional for loop.

Avoiding the need to include inline JavaScript events within the HTML markup.

let div = document.querySelectorAll('div');

div.forEach(function(div_current) {
  div_current.addEventListener('click', function() {
    for (var i = 0; i < div.length; i++) {
      div[i].style.backgroundColor = 'black';
    }
    this.style.backgroundColor = 'red';
  });
});

<div style="background-color: black;">text1</div>
<div style="background-color: black;">text2</div>
<div style="background-color: black;">text3</div>
<div style="background-color: black;">text4</div>
<div style="background-color: black;">text5</div>
<div style="background-color: black;">text6</div>

Answer 4

Check out this solution that utilizes forEach() along with a traditional for loop.

Avoiding the need to include inline JavaScript events within the HTML markup.

let div = document.querySelectorAll('div');

div.forEach(function(div_current) {
  div_current.addEventListener('click', function() {
    for (var i = 0; i < div.length; i++) {
      div[i].style.backgroundColor = 'black';
    }
    this.style.backgroundColor = 'red';
  });
});

<div style="background-color: black;">text1</div>
<div style="background-color: black;">text2</div>
<div style="background-color: black;">text3</div>
<div style="background-color: black;">text4</div>
<div style="background-color: black;">text5</div>
<div style="background-color: black;">text6</div>

Answer 5

Answer №3

It's important to assign proper classes to your tags. This way, you can easily implement events on these elements to customize their behavior.

let tags = document.getElementsByClassName('color-tag');
for (let item of document.getElementsByClassName('color-tag')) {
    item.addEventListener('click', function () {
        for (let i = 0; i < tags.length; i++) {
            tags[i].style.backgroundColor = 'black';
        }
        this.style.backgroundColor = 'red';
    });
}

<div class="color-tag" style="background-color: black;">text1</div>
<div class="color-tag" style="background-color: black;">text2</div>
<div class="color-tag" style="background-color: black;">text3</div>
<div class="color-tag" style="background-color: black;">text4</div>
<div class="color-tag" style="background-color: black;">text5</div>
<div class="color-tag" style="background-color: black;">text6</div>

Answer 6

It's important to assign proper classes to your tags. This way, you can easily implement events on these elements to customize their behavior.

let tags = document.getElementsByClassName('color-tag');
for (let item of document.getElementsByClassName('color-tag')) {
    item.addEventListener('click', function () {
        for (let i = 0; i < tags.length; i++) {
            tags[i].style.backgroundColor = 'black';
        }
        this.style.backgroundColor = 'red';
    });
}

<div class="color-tag" style="background-color: black;">text1</div>
<div class="color-tag" style="background-color: black;">text2</div>
<div class="color-tag" style="background-color: black;">text3</div>
<div class="color-tag" style="background-color: black;">text4</div>
<div class="color-tag" style="background-color: black;">text5</div>
<div class="color-tag" style="background-color: black;">text6</div>

Answer 7

Answer №4

Utilizing a parent element would simplify the process and enable you to separate the components effectively.

document.querySelectorAll('.wrapper').forEach(wrap => {
  wrap.addEventListener('click', e => {
    e.target.parentNode.querySelectorAll('div').forEach(div => {
      div.classList.remove('selected');
    });

    e.target.classList.add('selected');
  });
});

body {
  color: #FFF;
}

.selected {
  background: red !important;
}

<div class="wrapper">
  <div style="background-color: black;">text1</div>
  <div style="background-color: black;">text2</div>
  <div style="background-color: black;">text3</div>
  <div style="background-color: black;">text4</div>
  <div style="background-color: black;">text5</div>
  <div style="background-color: black;">text6</div>
</div>

<hr>

<div class="wrapper">
  <div style="background-color: black;">text1</div>
  <div style="background-color: black;">text2</div>
  <div style="background-color: black;">text3</div>
  <div style="background-color: black;">text4</div>
  <div style="background-color: black;">text5</div>
  <div style="background-color: black;">text6</div>
</div>

An alternate method, without the use of JavaScript, could involve using tabIndex along with the :focus pseudo-class selector.

body {
  color: #FFF;
}

.wrapper div:focus {
  background: red !important;
}

<div class="wrapper">
  <div style="background-color: black;" tabIndex="1">text1</div>
  <div style="background-color: black;" tabIndex="1">text2</div>
  <div style="background-color: black;" tabIndex="1">text3</div>
  <div style="background-color: black;" tabIndex="1">text4</div>
  <div style="background-color: black;" tabIndex="1">text5</div>
  <div style="background-color: black;" tabIndex="1">text6</div>
</div>

<hr>

<div class="wrapper">
  <div style="background-color: black;" tabIndex="1">text1</div>
  <div style="background-color: black;" tabIndex="1">text2</div>
  <div style="background-color: black;" tabIndex="1">text3</div>
  <div style="background-color: black;" tabIndex="1">text4</div>
  <div style="background-color: black;" tabIndex="1">text5</div>
  <div style="background-color: black;" tabIndex="1">text6</div>
</div>

Answer 8

Utilizing a parent element would simplify the process and enable you to separate the components effectively.

document.querySelectorAll('.wrapper').forEach(wrap => {
  wrap.addEventListener('click', e => {
    e.target.parentNode.querySelectorAll('div').forEach(div => {
      div.classList.remove('selected');
    });

    e.target.classList.add('selected');
  });
});

body {
  color: #FFF;
}

.selected {
  background: red !important;
}

<div class="wrapper">
  <div style="background-color: black;">text1</div>
  <div style="background-color: black;">text2</div>
  <div style="background-color: black;">text3</div>
  <div style="background-color: black;">text4</div>
  <div style="background-color: black;">text5</div>
  <div style="background-color: black;">text6</div>
</div>

<hr>

<div class="wrapper">
  <div style="background-color: black;">text1</div>
  <div style="background-color: black;">text2</div>
  <div style="background-color: black;">text3</div>
  <div style="background-color: black;">text4</div>
  <div style="background-color: black;">text5</div>
  <div style="background-color: black;">text6</div>
</div>

An alternate method, without the use of JavaScript, could involve using tabIndex along with the :focus pseudo-class selector.

body {
  color: #FFF;
}

.wrapper div:focus {
  background: red !important;
}

<div class="wrapper">
  <div style="background-color: black;" tabIndex="1">text1</div>
  <div style="background-color: black;" tabIndex="1">text2</div>
  <div style="background-color: black;" tabIndex="1">text3</div>
  <div style="background-color: black;" tabIndex="1">text4</div>
  <div style="background-color: black;" tabIndex="1">text5</div>
  <div style="background-color: black;" tabIndex="1">text6</div>
</div>

<hr>

<div class="wrapper">
  <div style="background-color: black;" tabIndex="1">text1</div>
  <div style="background-color: black;" tabIndex="1">text2</div>
  <div style="background-color: black;" tabIndex="1">text3</div>
  <div style="background-color: black;" tabIndex="1">text4</div>
  <div style="background-color: black;" tabIndex="1">text5</div>
  <div style="background-color: black;" tabIndex="1">text6</div>
</div>

Modify the background of a DIV upon clicking it

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilizing Mapbox-gl within a Vue.js single file component with Quasar-Framework integration

D3.js Sunbursts featuring Hierarchical Arcs that display values at each level, providing a comprehensive view beyond just the aggregate of the leaves

The most effective way to transmit data from an asynchronous call in Node.js while ensuring a reliable fallback routing structure

Hiding a row in AngularJS after changing its status can be achieved by utilizing the

To prevent multiple requests to the server, limit the number of requests received if a user clicks on a list too quickly

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

Manipulating the arrangement and alignment of div elements within a designated container

All I desire is to eliminate the term "class" from the text

Encountering an issue with a React-slick slider test case - receiving an error related to the inability to access property 'querySelector

Scouring the web with Cheerio to extract various information from Twitter

The quickest regular expression match possible if it is already a subsection of another match

Activating the submit button only following confirmation that the image dimensions have been verified

When decoding a JWT, it may return the value of "[object Object]"

Concealing and revealing information with jQuery and AJAX

Dissecting Distinct and Alphabetized Attributes in JSON/JavaScript

My custom class is being ignored by Tailwind CSS within breakpoints

Get the initial item from a Nested Array in JSON using NodeJS

Activate Button upon Textbox/Combobox/RadDatePicker Modification through JavaScript

Show a pop-up form when a user focuses on it using React

Creating Component Variants for Google Optimize A/B testing in Next.js