Alter the colors of all Divs inside a container with each click

Question

Alter the colors of all Divs inside a container with each click

Hey everyone, I'm just starting to learn JavaScript. I'm working on a project where I want to change the color of all the divs in a container every time they are clicked.

For example, on the first click, I want all the divs to turn red. Then, on the second click, I want them to turn green!

<!doctype html>
 <html lang="en">
  <head>
  <!-- Required meta tags -->
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
       <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
        <!--jquery easing plugin-->
         <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
         <!--custom css---->
         <link href="css/phcoding.css" type="text/css" rel="stylesheet">
          <title>cliciks</title>
          <style>
          </style>
           </head>
           <body>
<div id="container" onclick="myFunction();">
<div id="div1">This is div 1</p>
<div id="div2">This is div 2</p>
<div id="div3">This is div 3</p>
</div>
<script>
function  myFunction(){
    let x = document.getElementById("container");
    y=x.children;
    for(let i = 0; i< y.length;i++){
        y[i].style.color="red";
        y[i].style.color="green";
    }
}
myFunction();
</script>
          </body>
         </html>

javascript jquery html css bootstrap-4

Answer 1

Answer №1

Give it a shot:

$(".target").on("click",function(){
     if($(this).css("background-color") == "blue"){
           $(this).css("background-color","yellow");
     }else{
           $(this).css("background-color","blue");
     }
}

Answer 2

Give it a shot:

$(".target").on("click",function(){
     if($(this).css("background-color") == "blue"){
           $(this).css("background-color","yellow");
     }else{
           $(this).css("background-color","blue");
     }
}

Answer 3

Answer №2

To begin, start by creating a color map:

var colors = {
    "1": "blue",
    "2": "yellow"
};

Then, set up an event listener and initialize the click counter:

var clickCounter = 0;
var box = document.getElementById("box");
box.addEventListener("click", function (event)
{
    clickCounter++;
    box.querySelectorAll("div[id^=\"section\"]").forEach(function (element)
    {
        element.style.color = colors[clickCounter];
    });
});

Warm regards.

Answer 4

To begin, start by creating a color map:

var colors = {
    "1": "blue",
    "2": "yellow"
};

Then, set up an event listener and initialize the click counter:

var clickCounter = 0;
var box = document.getElementById("box");
box.addEventListener("click", function (event)
{
    clickCounter++;
    box.querySelectorAll("div[id^=\"section\"]").forEach(function (element)
    {
        element.style.color = colors[clickCounter];
    });
});

Warm regards.

Answer 5

Answer №3

Here is a helpful resource for beginners that may answer your question:

If you are just starting out, you might find this website useful:

(function () {
    var clickHandler = function (event) {
        // Selecting all div elements as targets
        var target = document.querySelectorAll('div');

        // Looping through each target
        for (var i = 0; i < target.length; i++) {

            // Changing background color to red if not already red, green if it's red
            if (target[i].style.backgroundColor != 'red') {
                target[i].style.backgroundColor = 'red';
            } else {
                target[i].style.backgroundColor = 'green';
            }

        }
    };
    // Attaching click event listener to the entire document
    document.addEventListener('click', clickHandler, false);

}());

Answer 6

Here is a helpful resource for beginners that may answer your question:

If you are just starting out, you might find this website useful:

(function () {
    var clickHandler = function (event) {
        // Selecting all div elements as targets
        var target = document.querySelectorAll('div');

        // Looping through each target
        for (var i = 0; i < target.length; i++) {

            // Changing background color to red if not already red, green if it's red
            if (target[i].style.backgroundColor != 'red') {
                target[i].style.backgroundColor = 'red';
            } else {
                target[i].style.backgroundColor = 'green';
            }

        }
    };
    // Attaching click event listener to the entire document
    document.addEventListener('click', clickHandler, false);

}());

Answer 7

Answer №4

Combining elements from previous responses...

<div id="container">
    <div>This is div 1</div>
    <div>This is div 2</div>
    <div>This is div 3</div>
</div>
<script>
    document.getElementById('container').addEventListener('click',function(e){
        Array.from( this.querySelectorAll('div') ).forEach( div=>{
            let colour;
            switch( div.style.color ){
                case '':colour='red';break; //default
                case 'red':colour='green';break;
                case 'green':colour='red';break;
            }
            div.style.color=colour;
        })
    });
</script>

If there is no specific need for ID attributes in the child divs, they can be removed. Ensure that start and end tags match correctly - <div>...</p> is not valid!!

Answer 8

Combining elements from previous responses...

<div id="container">
    <div>This is div 1</div>
    <div>This is div 2</div>
    <div>This is div 3</div>
</div>
<script>
    document.getElementById('container').addEventListener('click',function(e){
        Array.from( this.querySelectorAll('div') ).forEach( div=>{
            let colour;
            switch( div.style.color ){
                case '':colour='red';break; //default
                case 'red':colour='green';break;
                case 'green':colour='red';break;
            }
            div.style.color=colour;
        })
    });
</script>

If there is no specific need for ID attributes in the child divs, they can be removed. Ensure that start and end tags match correctly - <div>...</p> is not valid!!

Answer 9

Answer №5

Compile a list of different colors and then iterate through them.

$("#changeColor").click(function() {
        var currentColor = $(".con-child").css("background-color");
        var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
          var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
          $(".con-child").css("background-color", next);
        });

.con-child {
    display: block;
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 30px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containt" id="changeColor">
  <div class="con-child">
   
  </div>
  <div class="con-child">
    
  </div>
  <div class="con-child">
    
  </div>
</div>

Modify!!!

If you wish to change text color, simply remove the "background" property from JS:

$("#changeColor").click(function() {
        var currentColor = $(".con-child").css("color");
        var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
          var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
          $(".con-child").css("color", next);
    console.log(currentColor);
console.log(next);
        });

If dealing with RGB is not your preference and you prefer HEX values, check out this helpful guide on converting between the two:

Answer 10

Compile a list of different colors and then iterate through them.

$("#changeColor").click(function() {
        var currentColor = $(".con-child").css("background-color");
        var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
          var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
          $(".con-child").css("background-color", next);
        });

.con-child {
    display: block;
    height: 100px;
    width: 100px;
    background-color: red;
    margin-bottom: 30px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="containt" id="changeColor">
  <div class="con-child">
   
  </div>
  <div class="con-child">
    
  </div>
  <div class="con-child">
    
  </div>
</div>

Modify!!!

If you wish to change text color, simply remove the "background" property from JS:

$("#changeColor").click(function() {
        var currentColor = $(".con-child").css("color");
        var colorList = ["rgb(255, 0, 0)", "rgb(0, 255, 0)", "rgb(0, 0, 255)"];
          var next = colorList[($.inArray(currentColor, colorList) + 1) % colorList.length];
          $(".con-child").css("color", next);
    console.log(currentColor);
console.log(next);
        });

If dealing with RGB is not your preference and you prefer HEX values, check out this helpful guide on converting between the two:

Answer 11

Answer №6

Your HTML code contains numerous errors such as opening "< div>" tags and closing them with "< /p>". Additionally, your JavaScript includes a loop that applies a "red" style followed by a "green" style to elements, resulting in a constant display of green. Here is the corrected version of both the HTML and JS:

document.getElementById('container').addEventListener('click', myFunction)

function myFunction() {
  let divs = document.getElementsByClassName("color")

  if (divs[0].style.color === "green") {
    Array.prototype.map.call(divs, (div) => {
      div.style.color = "red"
    })
  } else {
    Array.prototype.map.call(divs, (div) => {
      div.style.color = "green"
    })
  }
}

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
  <!--jquery easing plugin-->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!--custom css---->
  <link href="css/phcoding.css" type="text/css" rel="stylesheet">
  <title>cliciks</title>
  <style>

  </style>
</head>

<body>
  <div id="container">
    <div class="color">
      <p>This is div 1</p>
    </div>
  
    <div class="color">
      <p>This is div 2</p>
    </div>
   
    <div class="color">
      <p>This is div 3</p>
    </div>
  </div>
  <script src="index.js">
  </script>
</body>

Answer 12

Your HTML code contains numerous errors such as opening "< div>" tags and closing them with "< /p>". Additionally, your JavaScript includes a loop that applies a "red" style followed by a "green" style to elements, resulting in a constant display of green. Here is the corrected version of both the HTML and JS:

document.getElementById('container').addEventListener('click', myFunction)

function myFunction() {
  let divs = document.getElementsByClassName("color")

  if (divs[0].style.color === "green") {
    Array.prototype.map.call(divs, (div) => {
      div.style.color = "red"
    })
  } else {
    Array.prototype.map.call(divs, (div) => {
      div.style.color = "green"
    })
  }
}

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
  <!--jquery easing plugin-->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <!--custom css---->
  <link href="css/phcoding.css" type="text/css" rel="stylesheet">
  <title>cliciks</title>
  <style>

  </style>
</head>

<body>
  <div id="container">
    <div class="color">
      <p>This is div 1</p>
    </div>
  
    <div class="color">
      <p>This is div 2</p>
    </div>
   
    <div class="color">
      <p>This is div 3</p>
    </div>
  </div>
  <script src="index.js">
  </script>
</body>

Alter the colors of all Divs inside a container with each click

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Why is the value returned by getBoundingClientRect 190 when the y attribute is set to 200 in SVG?

Using various designs on elements generated from ng-repeat

JavaScript code to place variables into an array with included variables

Tips for Placing a Div in a Precise Location

Issue with Angular application failing to fetch data from JSON server

Adjust the text size of a label in material-ui

Email confirmation section

End the div element upon completion of the Vimeo video

How to use JavaScript and regex to control the state of a disabled submit button

Adjust the position if the height exceeds 100 pixels

The session feature in Express is malfunctioning

CSS - Problem with background image appearing stretched on Samsung mobile devices

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

Checking the validity of a username through regex

How can you turn off the full-page display of Javascript errors in Visual Studio?

Deleting a hyperlink within a content-editable area

Is it a guarantee that a function called in the head section of a JavaScript for-of loop will only be executed once?

Adjust the panel size accordingly for smaller screens

Tips for creating two columns within a Bootstrap row, one with a form and the other with an image, that are both the same height and responsive

Implement a hover effect on a specific class targeting a nested element using JavaScript