change properties of two divs with one onclick and querySelectorAll()-CodePudding

I have multiple elements that are seperatet in two divs. The first div contains a Text and the second div a color. When I click on one element the text and color should change and if I click it again it should change back. The problem is that no matter which one I click, its always the last one which changes.

The HTML part:

<style>
    .colorGreen {
        background-color: green;
    }

    .colorRed {
        background-color: red;
    }
</style>

<div >Text1</div>
<div >O</div>
<div >Text1</div>
<div >O</div>
<div >Text1</div>
<div >O</div>

The JavaScript part:

<script type='text/javascript'>
    var box1Temp = document.querySelectorAll(".box1");
    var box2Temp = document.querySelectorAll(".box2");
    for (var i = 0; i < box1Temp.length; i  ) {
        var box1 = box1Temp[i];
        var box2 = box2Temp[i];
        box2.onclick = box1.onclick = function() {
            if (box1.classList.contains("colorGreen")) {
                box1.classList.add("colorRed");
                box1.classList.remove("colorGreen");
                box2.innerHTML = "Text2";
            } else {
                box1.classList.add("colorGreen");
                box1.classList.remove("colorRed");
                box2.innerHTML = "Text1";
            }
        }
    }
</script>

It works, when I use only one div. Then I can use 'this', instead of the 'box1' variable, to addres the right element. But if I replace 'box1' with 'this' its still the text div that changes. (I know it's obvious that this is happening, but I'm lost)

CodePudding user response：

Your code is so confused

You were right for the this option.

you can do with simple onclick function :

function change(el){
  box1 = el.querySelector('.box1');
  box2 = el.querySelector('.box2');
  if (box1.classList.contains("colorGreen")) {
      box1.classList.add("colorRed");
      box1.classList.remove("colorGreen");
      box2.innerHTML = "Text2";
    } else {
      box1.classList.add("colorGreen");
      box1.classList.remove("colorRed");
      box2.innerHTML = "Text1";
    }
}

<style>
    .colorGreen {
        background-color: green;
    }

    .colorRed {
        background-color: red;
    }
</style>

<div onclick="change(this)">
  <div >Text1</div>
  <div >O</div>
</div>

<div onclick="change(this)">
  <div >Text1</div>
<div >O</div>
  </div>
<div onclick="change(this)">
<div >Text1</div>
<div >O</div>
  </div>

CodePudding user response：

With a few small tweaks, this can be written a lot more cleanly:

// Capture click event for parent container, .toggle-set
for (const ele of document.querySelectorAll(".toggle-set")) {
    ele.addEventListener("click", function() {
    // Grab text and color elements
    const textToggle = ele.querySelector(".toggle-text");    
    const colorToggle = ele.querySelector(".toggle-color");
    
    // Toggle text
    // NOTE: This could use further refinement with regex or something similar to strip whitespace before comparison
    textToggle.textContent = textToggle.textContent == "Text1" ? "Text2" : "Text1";
    
    // Toggle css classes
    colorToggle.classList.toggle("colorGreen");
    colorToggle.classList.toggle("colorRed");
  });
}

.colorGreen { background-color: green; }
.colorRed { background-color: red; }

<div >
  <div >Text1</div>
  <div >
    O
  </div>
</div>

<div >
  <div >Text1</div>
  <div >
    O
  </div>
</div>

CodePudding user response：

I think following code snippet would help you to get your desired result

let box1  = document.querySelectorAll(".box1");
let box2  = document.querySelectorAll(".box2");

box1.forEach((b1,i) => {
  b1.addEventListener("click",(ev) => {
    ev.target.classList.toggle("colorGreen");
    ev.target.classList.toggle("colorRed");
    console.log(box2[i]);
    if(ev.target.classList.contains("colorGreen")){
      box2[i].textContent = "Text1";
    }else{
      box2[i].textContent = "Text2"
    }
  })
})