Изменение стиля к родительскому элементу JS

Question

Необходимо для дива completed сделать рамку красную. для expired синюю. Не могу обратиться к родительскому элементу.

let a;
let b;
let dueStatus = document.querySelectorAll("div");
for(let q of dueStatus) {
    if (q.dataset.status == `completed`) {
        a = q.dataset.status;
        a.parentElement.style.border = "1px solid red";
        console.log(a);
    }
    else if (q.dataset.status == `expired`) {
        b = q.dataset.status;
        console.log(b);
    }
}

  <div class="qqq" data-status="completed">
      Смотри фильм
  </div>

  <div class="qqq" data-status="expired">
      Читай книгу
  </div>

мое решение:

Answer 1

Вы пытаетесь получить parentElement у строки.

let a;
let b;
let dueStatus = document.querySelectorAll("div");
for(let q of dueStatus) {
    if (q.dataset.status == `completed`) {
        a = q.dataset.status;
        q.style.border = "1px solid red";
        console.log(a);
    }
    else if (q.dataset.status == `expired`) {
        b = q.dataset.status;
        q.style.border = "1px solid blue";
        console.log(b);
    }
}

<div class="qqq" data-status="completed">
      Смотри фильм
  </div>

  <div class="qqq" data-status="expired">
      Читай книгу
  </div>

Answer 2

Не забывайте также про возможности CSS:

.qqq[data-status=completed] {
  border: 1px solid red;
}

.qqq[data-status=expired] {
  border: 1px solid blue;
}

<div class="qqq" data-status="completed">
  Смотри фильм
</div>

<div class="qqq" data-status="expired">
  Читай книгу
</div>

БЛОГ НА HUSL

Изменение стиля к родительскому элементу JS

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