0

I want my divs to move when they're wider than 20% of the screen. I wrote this (below) and I have no idea what is wrong. I tried to use "querySelectorAll" instead of "getElementByClassName" but it also doesn't work. "getElementById" and "quertySelector" work perfectly, but only for the first div :(. What can write in the place of those methods? Maybe there is a better way? Please help me, greetings.

<!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>
<div id="s4" style="width:20%; font-size:2000%" class="class">something4</div>
<div id="s5" style="width:20%; font-size:2000%" class="class">something5</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>
wymyszony
  • 517
  • 3
  • 11
  • 2
    Because of the `s` in `getElementsByClassName`: it returns an node *list*, not a node. – trincot Feb 21 '17 at 17:56
  • 1
    [`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) returns a array of elements, not a singule element. If you refactor `isElementOverflowing` to handle an array, it should work. – Jason Feb 21 '17 at 17:57
  • `getElementsByClassName` returns a NodeList which must be iterated over either by the internal `.forEach()` method or a standard `for` loop to extract each element out and get its properties (even if only 1 element is found) – mhodges Feb 21 '17 at 17:59
  • @Jason Technically it is not an array, it is an internal JS structure called a NodeList - the prototypes are vastly different. https://developer.mozilla.org/en-US/docs/Web/API/NodeList – mhodges Feb 21 '17 at 18:00
  • @trincot Please undupe this question. The link you have provided doesn't fix OP's problem in 100%. Also it doesn't contain all the possible methods to fix it. – kind user Feb 21 '17 at 18:02
  • @Kinduser, I don't see how it does *not* address the OP's problem, and you can go and post a better answer over there, if you feel it is incomplete. – trincot Feb 21 '17 at 18:04
  • @trincot It does, but only like 20 percents of his problem. OP problem is more complex. I was writing a full answer for 10 minutes and you have just closed it. Once again, please consider unduping it. You will check my answer, if it doesn't satisfy you, I will delete it and you will re-dupe the question. – kind user Feb 21 '17 at 18:06
  • I suggest you address the OP, and ask them to post a new question (or review this one), so it no longer has as main question *"Why my “getElementsByClassName” doesn't work?"* – trincot Feb 21 '17 at 18:10

1 Answers1

-1

document.getElementsByClassName("class") returns an array (Edit: technically not actually an array) of elements. You need to loop through them to process them element by element.

Peter Collingridge
  • 10,849
  • 3
  • 44
  • 61