Guide to adding an active class to each block using Javascript

Question

Guide to adding an active class to each block using Javascript

My website utilizes a Bootstrap layout consisting of a container, rows, and multiple "block-divs," each containing three separate divs. The number of block-divs is generated dynamically by a script based on user input.

The issue I am facing is that when a user clicks on a div, an active class is added to it. However, my current code only allows for one active class to be set for the entire page rather than individual blocks.

I am seeking a solution to assign an active class to each block without relying on any JavaScript frameworks, using pure JavaScript instead.

Here is an example of my layout: https://jsfiddle.net/9vr92ss4/

<!-- JavaScript code here -->

<!-- CSS code here -->

<!-- HTML code here -->

javascript html css twitter-bootstrap function

Answer 1

Answer №1

You have actively reassigning the class names using this:

for (i = 0; i < myCol.length; i++) {
  myCol[i].className = 'col-xs-4 myCol';
}

It is important to verify if the parent node of myCol matches the parent node of target:

function setActive(e) {
  var target = getTarget(e),
      section = target.parentNode;

  for (i = 0; i < myCol.length; i++) {
    if (myCol[i].parentNode === section) {
      myCol[i].className = 'col-xs-4 myCol';
    }
  }

  target.className = 'col-xs-4 myCol active';
}

Here's an updated snippet showcasing the working version:

var myCol = document.getElementsByClassName('myCol');

function getTarget(e) {
  if (!e) {
    e = window.event;
  }
  return e.target || e.srcElement;
}

function setActive(e) {
var target = getTarget(e),
      section = target.parentNode;
  
  for (i = 0; i < myCol.length; i++) {
    if (myCol[i].parentNode === section) {
      myCol[i].className = 'col-xs-4 myCol';
    }
  }
  
  target.className = 'col-xs-4 myCol active';
}

for (j = 0; j < myCol.length; j++) {
  myCol[j].addEventListener('click', function(e) {
    setActive(e);
  }, false);
}

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet');

body {
    margin: 10px;
}

.myCol {
  padding: 40px 0;
  border: 1px solid #F44336;
  cursor: pointer;
  margin: 30px 0;
}

.active {
  background: #9C27B0;
  border: 1px solid #9C27B0;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row">
  
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-1</div>
      <div class="col-xs-4 myCol">b-1</div>
      <div class="col-xs-4 myCol">c-1</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-2</div>
      <div class="col-xs-4 myCol">b-2</div>
      <div class="col-xs-4 myCol">c-2</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-3</div>
      <div class="col-xs-4 myCol">b-3</div>
      <div class="col-xs-4 myCol">c-3</div>
    </div>
    
  </div>
</div>

Answer 2

You have actively reassigning the class names using this:

for (i = 0; i < myCol.length; i++) {
  myCol[i].className = 'col-xs-4 myCol';
}

It is important to verify if the parent node of myCol matches the parent node of target:

function setActive(e) {
  var target = getTarget(e),
      section = target.parentNode;

  for (i = 0; i < myCol.length; i++) {
    if (myCol[i].parentNode === section) {
      myCol[i].className = 'col-xs-4 myCol';
    }
  }

  target.className = 'col-xs-4 myCol active';
}

Here's an updated snippet showcasing the working version:

var myCol = document.getElementsByClassName('myCol');

function getTarget(e) {
  if (!e) {
    e = window.event;
  }
  return e.target || e.srcElement;
}

function setActive(e) {
var target = getTarget(e),
      section = target.parentNode;
  
  for (i = 0; i < myCol.length; i++) {
    if (myCol[i].parentNode === section) {
      myCol[i].className = 'col-xs-4 myCol';
    }
  }
  
  target.className = 'col-xs-4 myCol active';
}

for (j = 0; j < myCol.length; j++) {
  myCol[j].addEventListener('click', function(e) {
    setActive(e);
  }, false);
}

/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet');

body {
    margin: 10px;
}

.myCol {
  padding: 40px 0;
  border: 1px solid #F44336;
  cursor: pointer;
  margin: 30px 0;
}

.active {
  background: #9C27B0;
  border: 1px solid #9C27B0;
  color:#fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
  <div class="row">
  
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-1</div>
      <div class="col-xs-4 myCol">b-1</div>
      <div class="col-xs-4 myCol">c-1</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-2</div>
      <div class="col-xs-4 myCol">b-2</div>
      <div class="col-xs-4 myCol">c-2</div>
    </div>
    
    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-3</div>
      <div class="col-xs-4 myCol">b-3</div>
      <div class="col-xs-4 myCol">c-3</div>
    </div>
    
  </div>
</div>

Answer 3

Answer №2

Here is a more streamlined approach, utilizing the power of jQuery.

$('.myCol').click(function() {
  $(this).parent().find('.myCol').removeClass('active');
  $(this).toggleClass('active');
})

body {
  margin: 10px;
}

.myCol {
  padding: 40px 0;
  border: 1px solid #F44336;
  cursor: pointer;
  margin: 30px 0;
}

.active {
  background: #9C27B0;
  border: 1px solid #9C27B0;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container text-center">
  <div class="row">

    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-1</div>
      <div class="col-xs-4 myCol">b-1</div>
      <div class="col-xs-4 myCol">c-1</div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-2</div>
      <div class="col-xs-4 myCol">b-2</div>
      <div class="col-xs-4 myCol">c-2</div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-3</div>
      <div class="col-xs-4 myCol">b-3</div>
      <div class="col-xs-4 myCol">c-3</div>
    </div>

  </div>
</div>

Answer 4

Here is a more streamlined approach, utilizing the power of jQuery.

$('.myCol').click(function() {
  $(this).parent().find('.myCol').removeClass('active');
  $(this).toggleClass('active');
})

body {
  margin: 10px;
}

.myCol {
  padding: 40px 0;
  border: 1px solid #F44336;
  cursor: pointer;
  margin: 30px 0;
}

.active {
  background: #9C27B0;
  border: 1px solid #9C27B0;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container text-center">
  <div class="row">

    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-1</div>
      <div class="col-xs-4 myCol">b-1</div>
      <div class="col-xs-4 myCol">c-1</div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-2</div>
      <div class="col-xs-4 myCol">b-2</div>
      <div class="col-xs-4 myCol">c-2</div>
    </div>

    <div class="col-xs-12 block">
      <div class="col-xs-4 myCol">a-3</div>
      <div class="col-xs-4 myCol">b-3</div>
      <div class="col-xs-4 myCol">c-3</div>
    </div>

  </div>
</div>

Answer 5

Answer №3

Approach the problem by considering each row individually to make it easier.

Your progress is commendable. To streamline your process, utilize a data structure to keep track of your grid's status.

Answer 6

Approach the problem by considering each row individually to make it easier.

Your progress is commendable. To streamline your process, utilize a data structure to keep track of your grid's status.

Guide to adding an active class to each block using Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Querying MySQL database for variable values in JavaScript

Concerning the issue of components not loading correctly when using Angular with Lazy Loading Routing

Is it feasible to use both position absolute and position sticky at the same time? If so, how can this be accomplished?

How to center elements vertically in a navbar using Bootstrap 5

"Enhance Your Website with jQuery UI Tooltips Featuring HTML Content

What is the proper way to incorporate a backend variable within an EJS script block?

The meteorite experienced a crash as startup.js attempted to connect with Mongo

Assign Multiple Values to a PHP Variable and populate an HTML input field with the value

Can I issue multiple SADD or ZADD commands in a single .sadd/.zadd call using ioredis?

The same size background effect

Dynamically create an array of various objects

Should input fields be placed inside separate columns or share a column in Bootstrap to keep them together while being right justified?

What could be the reason behind the failure of my JSON post method on the local web server for my JSON file?

Could the issue at hand possibly stem from the fact that the router isn't fully operational? It appears that router.query

Using Ngmap to dynamically display markers using ng-repeat in JavaScript

Deleting a row in a MySQL database using AJAX and PHP: A step-by

Retrieving JSON information using Ajax to enhance Cytoscape visualization

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

Repeated triggering of add event detected in blueimp File Upload function

Customizing Background Colors with ChartJs and React