How not to change the colours of all the following div´s

Question

doing a to-do list - just for myself, decided to remember JS I have checkboxes and divs that are generated by themselves when a person enters text into an input. Checkboxes and divs have their own unique id (paired checkbox and div have the same id) Faced the following problem - imagine that a person has completed some task and decides to click on a checkbox. But when he clicks on the checkbox, the colour of all the following divs changes, not just one How to solve this problem?

let tasks = document.querySelector(".tasks");
let alert = document.querySelector(".alert");

document.querySelector(".inputTasks").onkeypress = (event) => {
  let unicalNum = "id" + Math.random().toString(16).slice(2);
  let taskStr = document.querySelector(".inputTasks").value;

  if (event.keyCode == 13) {
    if (taskStr == "") {
      alert.innerHTML = "Write anything!";
      return;
    }
    alert.innerHTML = "";

    let divTask = document.createElement("div");
    divTask.className = "task";

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.className = "checkBox";
    checkBox.id = unicalNum;


    let div = document.createElement("div");
    div.className = "taskName";
    div.innerHTML = taskStr;
    div.id = unicalNum;

    divTask.appendChild(checkBox);
    divTask.appendChild(div);
    tasks.appendChild(divTask);

    let task = document.querySelectorAll(".task");
    let allCheck = document.querySelectorAll(".checkBox");
    let allDivs = document.querySelectorAll(".taskName");
    // check(allCheck, allDivs);

    for (let i = 0; i < allCheck.length; i++) {
      for (let j = 0; j < allDivs.length; j++) {
        allCheck[i].addEventListener('change', event => {
          if (allCheck[i].id == allDivs[j].id) {
            if (!event.target.matches('.checkBox')) return;
            let rndColor = '#' + Math.floor(Math.random() * 0x777 + 0x777).toString(16);
            div.style.color = rndColor;
          }
        });
      }
    }
  }
}

.task {
  display: flex;
  justify-content: start;
}

.inputTasks {
  margin-left: auto;
  margin-right: auto;
}

.complete {
  color: red;
}

<body>
  <input type="text" class="inputTasks" placeholder="Enter">
  <div class="alert"></div>
  <div class="tasks">

  </div>
  <script src="js/script.js"></script>
</body>

Answer 1

Можно добавить слушатель onchange и присваивать цвет диву в колбеке. Это читабельнее..

let tasks = document.querySelector(".tasks");
let alert = document.querySelector(".alert");

document.querySelector(".inputTasks").onkeypress = (event) => {
  let unicalNum = "id" + Math.random().toString(16).slice(2);
  let taskStr = document.querySelector(".inputTasks").value;

  if (event.keyCode == 13) {
    if (taskStr == "") {
      alert.innerHTML = "Write anything!";
      return;
    }
    alert.innerHTML = "";

    let divTask = document.createElement("div");
    divTask.className = "task";

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.className = "checkBox";
    checkBox.id = unicalNum;
    checkBox.onchange = function(e) {
      let rndColor = '#' + Math.floor(Math.random() * 0x777 + 0x777).toString(16);
      if (this.checked) {
        document.querySelector('div#' + this.id).style.color = rndColor
      } else {
        document.querySelector('div#' + this.id).style.color = 'black'
      }
    }

    let div = document.createElement("div");
    div.className = "taskName";
    div.innerHTML = taskStr;
    div.id = unicalNum;

    divTask.appendChild(checkBox);
    divTask.appendChild(div);
    tasks.appendChild(divTask);
  }
}

.task {
  display: flex;
  justify-content: start;
}

.inputTasks {
  margin-left: auto;
  margin-right: auto;
}

.complete {
  color: red;
}

<body>
  <input type="text" class="inputTasks" placeholder="Enter">
  <div class="alert"></div>
  <div class="tasks">

  </div>
  <script src="js/script.js"></script>
</body>

БЛОГ НА HUSL

How not to change the colours of all the following div´s

Ответы (1 шт):