CODEWITHSUNDEEP
javascripthtml
GoodnessGoodness Chi
GoodnessGoodness Chi

Reputation: 85

Change Button color on every Click [ Javascript ]

I try to write a simple program to change color of a divs in a container every time i click.. on the first click it only changes color to on Div 1 ,Div 3,Div 5. on the second click it does Vice versa,

<!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">
  <title>clciks</title>
</head>

<body>
  <div id="container">
    <div>This is Div 1</div>
    <div>This is Div 2</div>
    <div>This is Div 3</div>
    <div>This is Div 4</div>
    <div>This is Div 5</div>
  </div>
  <script>
    let x = document.getElementById("container");
    let y = x.children;
    let click = 0;

    function myFunction() {
      for (let i = 0; i < y.length; i++) {
        y[i].onclick = function() {
          if (click == 0) {
            y[i].style.color = "blue";
            click = 1;
          } else {
            y[i].style.color = "red";
            click = 0;
          }
        }
      }
    }
    myFunction();
  </script>
</body>

</html>

Upvotes: 0

Views: 1128

Answers (3)

Roy Bogado
Roy Bogado

Reputation: 4472

They are sharing the same click variable.
Just put your let click = 0; inside the for in each div

@GoodnessGoodness Chi:
Can we do a little modification from your answer?
Now i wan't to change the color of All DIVS to yellow when the div return nodeType == 1 is cliked

    <!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">
      <title>clciks</title>
    </head>

    <body>
      <div id="container">
        <div>This is Div 1</div>
        <div>This is Div 2</div>
        <div>This is Div 3</div>
        <div>This is Div 4</div>
        <div>This is Div 5</div>
      </div>
      <script>
        let x = document.getElementById("container");
        let y = x.children;
        

        function myFunction() {
          for (let i = 0; i < y.length; i++) {
            let click = 0;
            let z = x.childNodes;
            y[i].onclick = function() {
              if (click == 0) {
                y[i].style.color = "blue";
                click = 1;
              } else {
                y[i].style.color = "red";
                click = 0;
              }
//now change the color of DIVS to yellow
            if(z[i].nodeType == 1)
{
y[i].style.color = "yellow";
}
            }
          }
        }
        myFunction();
      </script>
    </body>

    </html>

Upvotes: 1

MSA
MSA

Reputation: 277

you can control css without any loops

the simplest code using click event

$("#container").on("click",
  function(e) {
    if (e.target.style.color === "red") {
        e.target.style.color = "blue"
        return;
      }
      e.target.style.color = "red"
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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">
  <title>clciks</title>
</head>

<body>
  <div id="container">
    <div>This is Div 1</div>
    <div>This is Div 2</div>
    <div>This is Div 3</div>
    <div>This is Div 4</div>
    <div>This is Div 5</div>
  </div>
</body>

</html>

Upvotes: 0

Abhisar Tripathi
Abhisar Tripathi

Reputation: 1659

We just need to change the onClick function a bit inside...

Hope this helps...

let x = document.getElementById("container");
    let y = x.children;
    let click = 0;
    function changeColorForEach(){
    for (let i = 0; i < y.length; i++) {
      if(y[i].style.color === "blue"){
                y[i].style.color = "red";
            }else{
                y[i].style.color = "blue";
            }
      }
    }
    function myFunction() {
      for (let i = 0; i < y.length; i++) {
        y[i].onclick = changeColorForEach;
      }
    }
    myFunction();
<!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">
  <title>clciks</title>
</head>

<body>
  <div id="container">
    <div>This is Div 1</div>
    <div>This is Div 2</div>
    <div>This is Div 3</div>
    <div>This is Div 4</div>
    <div>This is Div 5</div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions