CODEWITHSUNDEEP
javascripthtmlrefactoringuser-experiencegetelementsbyclassname
wymyszony
wymyszony

Reputation: 517

How to refactor my function that it works for more than one div?

I want my divs to move when they're wider than 20% of the screen. Does anyone know how to refactor ma function "isElementOverflowing()" that it works fo multiple divs (for example 3)? I used "getElementById" and "querySelectorAll" to get the divs, but it doesn't work for my function.

Thanks for help :)

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="s1" style="width:20%; font-size:2000%" class="class">something1</div>
<div id="s2" style="width:20%; font-size:2000%" class="class">something2</div>
<div id="s3" style="width:20%; font-size:2000%" class="class">something3</div>

<script type="text/javascript">

function isElementOverflowing(element) {
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;

return (overflowX || overflowY);
}

function wrapContentsInMarquee(element) {
var marquee = document.createElement('marquee'),
contents = element.innerText;

marquee.innerText = contents;
marquee.behavior = "alternate";
element.innerHTML = '';
element.appendChild(marquee);
}

var element = document.getElementsByClassName("class");

if (isElementOverflowing(element)) {
wrapContentsInMarquee(element);
}
</script>
</body>
</html>

Upvotes: 0

Views: 71

Answers (2)

Flavio Ochoa
Flavio Ochoa

Reputation: 961

The getElementsByClassName returns an array-like object of all child elements which have all of the given class names. More info here.
So in your function isElementOverflowing you are getting a dom element, not an array of them. Then, you only need to iterate those elements.

elements.forEach(function(element) {
  if (isElementOverflowing(element)) {
    wrapContentsInMarquee(element);
  }
});

Upvotes: 1

AVAVT
AVAVT

Reputation: 7143

You can loop over each of them I guess:

function isElementOverflowing(element) {
  var overflowX = element.offsetWidth < element.scrollWidth,
    overflowY = element.offsetHeight < element.scrollHeight;

  return (overflowX || overflowY);
}

function wrapContentsInMarquee(element) {
  var marquee = document.createElement('marquee'),
    contents = element.innerText;

  marquee.innerText = contents;
  marquee.behavior = "alternate";
  element.innerHTML = '';
  element.appendChild(marquee);
}

var elements = document.getElementsByClassName("class");

for (var i = 0; i < elements.length; i++) {
  if (isElementOverflowing(elements[i])) {
    wrapContentsInMarquee(elements[i]);
  }
}
<div id="s1" style="width:20%; font-size:2000%" class="class">something1</div>
<div id="s2" style="width:20%; font-size:2000%" class="class">something2</div>
<div id="s3" style="width:20%; font-size:2000%" class="class">something3</div>

Upvotes: 1

Related Questions