javascript removing element style after clicking other

Aquarius
April 25, 2024
199 views
0 votes
2 Answers

I’m trying to remove attribute "selected" from span element when other span element (not the same div) is clicked

and

How to remove attribute "selected" of span element in div_bottom1 while div1 another span is selected?

<script type="text/javascript">
   window.addEventListener('DOMContentLoaded',() => {
      const div1 = document.getElementById('div1');
         div1.addEventListener('click', (e) => {
            const div1span = e.target.closest('span.swatch');
            if (!div1span) return;
            const dj = document.getElementById('div_bottom1');
            const djp = document.getElementById('div_bottom2');
            const dd = document.getElementById('div_bottom3');
   
         if (div1span.matches('.div1swatch')) {
            const clodj = dj.closest('span.selected');
            const clodd = dd.closest('span.selected');
            clodj.removeProperty('selected');
            clodd.removeProperty('selected');
         }
   });
</script>

It works till getting div1span.matches('.div1swatch') and then:

"Uncaught TypeError: Cannot read properties of null" error

div 2-4 are separate divs outside div1 and have style.display = "none"; set while div1span is switched

Clicking on div1span sets style.display = "none"; to div_bottom2 and div_bottom3.

Clicking on div2span sets style.display = "none"; to div_bottom1 and div_bottom3

Clicking on div3span sets style.display = "none"; to div_bottom1 and div_bottom2

Is it related?

What I’m doing wrong? I’m javascript newbie, coding in php + html so far

html
javascript

Tags: deselect javascript

Answers

Store in a variable let elBoxSelected; the selected item (Element)
Assign a click to all(!) your boxes (not only to the ones in #div1)

let elSwatchSelected;

document.querySelector("#swatches").addEventListener("click", (ev) => {
  const elSwatch = ev.target.closest(".swatch");

  if (!elSwatch) return; // Not a swatch box. Do nothing.

  if (elSwatch !== elSwatchSelected) {
    elSwatchSelected?.classList.remove("selected"); // Deselect previous (if any)
    elSwatchSelected = elSwatch; // Make this one the new seelected
  }

  elSwatchSelected.classList.toggle("selected"); // Toggle 

});

.row {
  display: flex;
  margin-bottom: 1rem;
  gap: 1rem;
}

.swatch {
  display: inline-flex;
  border: 2px solid #000;
  width: 3rem;
  aspect-ratio: 1;
  cursor: pointer;
  &.selected {
    border-color: #0bf;
    &::after {
      margin: auto;
      content: "✓";
    }
  }
}

<div id="swatches">
  <div class="row">
    <div class="swatch"></div>
    <div class="swatch"></div>
    <div class="swatch"></div>
  </div>
  <div class="row">
    <div class="swatch"></div>
    <div class="swatch"></div>
    <div class="swatch"></div>
    <div class="swatch"></div>
  </div>
</div>

The entire functionality can be achieved without any JavaScript but with just pure HTML/CSS. It only requires some markup changes and applying some fitting css rules.

The usage of the <label/> / <input type="radio"/> relationship together with the functional :has() CSS pseudo-class mainly does the trick and enables keyboard navigation as well.

.item-overview {
  .row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  label {
    position: relative;
    display: inline-flex;
    aspect-ratio: 1;
    width: 4rem;
    border: 2px solid #000;
    cursor: pointer;

    &::before {
      width: 100%;
      height: 100%;
      content: attr(data-name);
      background-color: #e0feff;
      align-content: center;
      text-align: center;
    }/*
    &::after {
      background-color: red;
    }*/
    &:has(:checked) {
      border-color: #0bf;

      &::after {
        position: absolute;
        top: 3px;
        width: 100%;
        content: "✓";
        text-align: center;
      }
    }
    > [type="radio"] {
      position: absolute;
      z-index: -1;
    }
  }
}

<div id="swatches" class="item-overview">
  <div class="row">

    <label data-name="Swatch 1">
      <input type="radio" name="swatch" value="swatch-1" />
    </label>
    <label data-name="Swatch 2">
      <input type="radio" name="swatch" value="swatch-2" />
    </label>
    <label data-name="Swatch 3">
      <input type="radio" name="swatch" value="swatch-3" />
    </label>
    <label data-name="Swatch 4">
      <input type="radio" name="swatch" value="swatch-4" />
    </label>

  </div>
  <div class="row">

    <label data-name="Swatch 5">
      <input type="radio" name="swatch" value="swatch-5" />
    </label>
    <label data-name="Swatch 6">
      <input type="radio" name="swatch" value="swatch-6" />
    </label>
    <label data-name="Swatch 7">
      <input type="radio" name="swatch" value="swatch-7" />
    </label>
    <label data-name="Swatch 8">
      <input type="radio" name="swatch" value="swatch-8" />
    </label>

  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.