How to select and then deselect area?

Question

I am a beginner learning from tutorials and have created a product colour customiser. Currently, there is only one way to deselect the highlighted area, and that is by clicking outside the image.

How do I select and highlight an area, and then click and select it again to deselect that specific area?

const overlays = [];
document.querySelectorAll(".product").forEach(function (path) {
  path.onclick = chooseProduct;
});

function chooseProduct(e) {
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add("highlight"));
}

var removeHighlight = function (e) {
  var products = document.querySelectorAll(".product");

  if (
    !e.target.classList.contains("product") &&
    !e.target.classList.contains("color")
  ) {
    overlays.length = 0;
    document.querySelectorAll(".product").forEach(function (prod) {
      prod.classList.remove("highlight");
    });
  }
};
document.onclick = removeHighlight;

var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  // get the hex color
  let hex = e.target.getAttribute("data-hex");
  overlays.forEach((overlay) => (overlay.style.fill = hex));
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #cccccc;
}

#background-image {
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

[data-test] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  padding-left: 15px;
  padding-right: 15px;
}

[data-test] span.color {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  padding-bottom: 9px;
}

[data-test] span.color span {
  height: 23px;
  width: 20px;
  background: var(--color);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: -6px;
}

[data-test] span.color span:first-child {
  margin-left: 1px;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

.red {
  z-index: 2;
  padding: 100px;
}

user_6831341 · Answer

I made the following adjustments to your chooseProduct function to achieve the desired effect-- obviously you'll probably want to restructure, rename, and properly abstract this functionality, but it meets your requirements:

function chooseProduct(e) {
  // iterate over the overlays...
  for (let i = 0; i < overlays.length; i += 1) {
    let currentOverlay = overlays[i];
    // and if the item you just clicked is already in overlays...
    if (currentOverlay.isSameNode(e.target)) {
      // remove it from overlays...
      overlays.splice(i, 1);
      // remove its highlight class...
      e.target.classList.remove('highlight')
      // and exit the function completely-- we don't want to re-add it
      return;
    }
  }
  // else;

  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add("highlight"));

}

You can see it working in the below snippet:

const overlays = [];
document.querySelectorAll(".product").forEach(function(path) {
  path.onclick = chooseProduct;
});

function chooseProduct(e) {
  // iterate over the overlays...
  for (let i = 0; i < overlays.length; i += 1) {
    let currentOverlay = overlays[i];
    // and if the item you just clicked is already in overlays...
    if (currentOverlay.isSameNode(e.target)) {
      // remove it from overlays...
      overlays.splice(i, 1);
      // remove its highlight class...
      e.target.classList.remove('highlight')
      // and exit the function completely-- we don't want to re-add it
      return;
    }
  }
  // else;

  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add("highlight"));

}

var removeHighlight = function(e) {
  var products = document.querySelectorAll(".product");

  if (!e.target.classList.contains("product") &&
    !e.target.classList.contains("color")
  ) {
    overlays.length = 0;
    document.querySelectorAll(".product").forEach(function(prod) {
      prod.classList.remove("highlight");
    });
  }
};
document.onclick = removeHighlight;

var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  // get the hex color
  let hex = e.target.getAttribute("data-hex");
  overlays.forEach((overlay) => (overlay.style.fill = hex));
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #cccccc;
}

#background-image {
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

[data-test] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  padding-left: 15px;
  padding-right: 15px;
}

[data-test] span.color {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  padding-bottom: 9px;
}

[data-test] span.color span {
  height: 23px;
  width: 20px;
  background: var(--color);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: -6px;
}

[data-test] span.color span:first-child {
  margin-left: 1px;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

.red {
  z-index: 2;
  padding: 100px;
}

user_11518865 · Answer

Click on product class to check if it has highlight class exists.
If there is a highlight class, remove it.
If there is no highlight class then to add

const product_box = document.getElementsByClassName('product');
const color_piker = document.getElementsByClassName('color-selected');

for (const box of product_box) {
    box.addEventListener('click', function (e) {
        if (box.classList.contains('highlight')) {
            box.classList.remove('highlight');
        } else {
            box.classList.add('highlight');
        }
    });
}

document.addEventListener('click', function (e) {
    const target = e.target;
    if (!target.classList.contains('product') && !target.classList.contains('color-selected')) {
        for (const box of product_box) {
            box.classList.remove('highlight');
        }
    }
});

for (const color of color_piker) {
    color.addEventListener('click', function (e) {
        const color_value = color.getAttribute('data-hex');
        const product_box = document.querySelectorAll('.product.highlight');

        for (const product of product_box) {
            product.style.fill = color_value;
            product.classList.remove('highlight');
        }
    });
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

#container {
    height: 200px;
    width: 200px;
}

#product-svg {
    position: relative;
    z-index: 2;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    mix-blend-mode: multiply;
}

path {
    fill: #cccccc;
}

#background-image {
    position: relative;
    z-index: 1;
    width: 85%;
    height: auto;
}

[data-test] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    padding-left: 15px;
    padding-right: 15px;
}

[data-test] span.color {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 60px;
    padding-bottom: 9px;
}

[data-test] span.color span {
    height: 23px;
    width: 20px;
    background: var(--color);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    margin-bottom: -6px;
}

[data-test] span.color span:first-child {
    margin-left: 1px;
}

.highlight {
    stroke-width: 10px;
    stroke: #000;
}

.red {
    z-index: 2;
    padding: 100px;
}

user_11348077 · Answer

to toggle the highlight class you need the toggle function of classList, this is the code, also, I change some names

const overlays = [];

document.querySelectorAll(".product").forEach((path) => {
  path.addEventListener("click", toggleProductHighlight);
});

function toggleProductHighlight({ target }) {
  const highlightClass = "highlight"
  
  target.classList.toggle(highlightClass);
  
  if(!target.classList.contains(highlightClass)) overlays.push(target);
}

var removeHighlight = function ({ target }) {
  if (
    !target.classList.contains("product") &&
    !target.classList.contains("color")
  ) {
    overlays.length = 0;
    document.querySelectorAll(".product").forEach((prod) => {
      prod.classList.remove("highlight");
    });
  }
};

document.onclick = removeHighlight;

const colorsEl = document.getElementsByClassName("color");

function changeColor({ target }) {
  const hexColor = target.getAttribute("data-hex");

  overlays.forEach((overlay) => (overlay.style.fill = hexColor));
}

[...colorsEl].forEach((el) => el.addEventListener("click", changeColor));

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #cccccc;
}

#background-image {
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

[data-test] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  padding-left: 15px;
  padding-right: 15px;
}

[data-test] span.color {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  padding-bottom: 9px;
}

[data-test] span.color span {
  height: 23px;
  width: 20px;
  background: var(--color);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: -6px;
}

[data-test] span.color span:first-child {
  margin-left: 1px;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

.red {
  z-index: 2;
  padding: 100px;
}

How to select and then deselect area?

3 Answers