javascript not adding class to div

Question

<div 
  id="overlay_block" 
  class="overlay-type overlay" 
  data-text-placement="{{ block.settings.overlay_position }}" 
  data-mobile-text-placement="{{ block.settings.overlay_mobile }}">
</div>

and this bit of javascript that should add/remove the div class on window resize.

var mq = window.matchMedia("(max-width: 767px)");
var overlayBlock = document.getElementById("overlay_block");
var textPlacement = overlayBlock.getAttribute("data-text-placement");
var mobileTextPlacement = overlayBlock.getAttribute("data-mobile-text-placement");
console.log("textPlacement: ", textPlacement);
console.log("mobileTextPlacement: ", mobileTextPlacement);
if (mq.matches) {
  overlayBlock.classList.add(mobileTextPlacement);
  overlayBlock.classList.remove(textPlacement);
} else {
  overlayBlock.classList.add(textPlacement);
  overlayBlock.classList.remove(mobileTextPlacement);
}
window.addEventListener("resize", function () {
  if (window.innerWidth < 767) {
    overlayBlock.classList.add(mobileTextPlacement);
    overlayBlock.classList.remove(textPlacement);
  } else {
    overlayBlock.classList.add(textPlacement);
    overlayBlock.classList.remove(mobileTextPlacement);
  }
});

As you can see from the code I have logged to console the variables that contains the class that should be added to the div and they contain the correct values that are the css class i need to add:

textPlacement:  position--left position--top
mobileTextPlacement:  position--right position--bottom

Also if i replace one of the statements (e.g. overlayBlock.classList.add(textPlacement) with a string overlayBlock.classList.add("some text") the string gets added correctly to the div class. Any hint on how to fix my code?

PS: I'd prefer to avoid using jquery

Any help appreciated

Please format the code properly. stackoverflow.com/help/formatting — C3roe
– C3roe, Commented Feb 2, 2023 at 11:30
textPlacement: position--left position--top - classList.add does not work with one value that contains multiple class names. Each parameter needs to be a single valid class name. — C3roe
– C3roe, Commented Feb 2, 2023 at 11:37
Hi, thanks for the hint. You mean {{ block.settings.overlay_position }} and {{ block.settings.overlay_mobile }} ? those are liquid schema variables. When I output those to console I get the correct values: textPlacement: return position--left position--top mobileTextPlacement returns position--right position--bottom — datacleaner
– datacleaner, Commented Feb 2, 2023 at 11:39
Does this answer your question? Is there a way to add/remove several classes in one single instruction with classList? — derpirscher
– derpirscher, Commented Feb 2, 2023 at 11:41

datacleaner · Accepted Answer · 2023-02-02 11:47:37Z

0

Ok so thanks to @CBroe hint I manager to fix my code. Here is the correct script

var mq = window.matchMedia("(max-width: 767px)");
var overlayBlock = document.getElementById("overlay_block");
var textPlacement = overlayBlock.getAttribute("data-text-placement");
var mobileTextPlacement = overlayBlock.getAttribute("data-mobile-text-placement");

var addClasses = function(elem, classList) {
  var classes = classList.split(" ");
  for (var i = 0; i < classes.length; i++) {
    elem.classList.add(classes[i]);
  }
};

var removeClasses = function(elem, classList) {
  var classes = classList.split(" ");
  for (var i = 0; i < classes.length; i++) {
    elem.classList.remove(classes[i]);
  }
};

if (mq.matches) {
  addClasses(overlayBlock, mobileTextPlacement);
  removeClasses(overlayBlock, textPlacement);
} else {
  addClasses(overlayBlock, textPlacement);
  removeClasses(overlayBlock, mobileTextPlacement);
}

window.addEventListener("resize", function() {
  if (window.innerWidth < 767) {
    addClasses(overlayBlock, mobileTextPlacement);
    removeClasses(overlayBlock, textPlacement);
  } else {
    addClasses(overlayBlock, textPlacement);
    removeClasses(overlayBlock, mobileTextPlacement);
  }
});

answered Feb 2, 2023 at 11:47

datacleaner

92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

derpirscher Over a year ago

If classes is an array of strings, instead of your loop, you can just do elem.classList.add([...classes]) developer.mozilla.org/en-US/docs/Web/API/Element/classList (which also the linked duplicate will tell you)

datacleaner Over a year ago

so you mean I could just amend my original code replacing (mobileTextPlacement) with (...mobileTextPlacement) and (textPlacement)with (...textPlacement) ? seems great !

derpirscher Over a year ago

no, not mobileTextPlacement because thats a string, but you can do overlayBlock.classList.add(...mobileTextPlacement.split(" "))

datacleaner · Accepted Answer · 2023-02-02 14:15:54Z

Ok so this is the final piece of working code, definitely more elegant than the previous loop. With a simple mod to the original code.

var mq = window.matchMedia("(max-width: 767px)");
var overlayBlock = document.getElementById("overlay_block");
var textPlacement = overlayBlock.getAttribute("data-text-placement").split(" ");
var mobileTextPlacement = overlayBlock.getAttribute("data-mobile-text-placement").split(" ");

if (mq.matches) {
  overlayBlock.classList.add(...mobileTextPlacement);
  overlayBlock.classList.remove(...textPlacement);
} else {
  overlayBlock.classList.add(...textPlacement);
  overlayBlock.classList.remove(...mobileTextPlacement);
}

window.addEventListener("resize", function() {
  if (window.innerWidth < 767) {
    overlayBlock.classList.add(...mobileTextPlacement);
    overlayBlock.classList.remove(...textPlacement);
  } else {
    overlayBlock.classList.add(...textPlacement);
    overlayBlock.classList.remove(...mobileTextPlacement);
  }
});

Collectives™ on Stack Overflow

javascript not adding class to div

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related