Var doesn't get elements from document.getElementsByClassName()

Question

var index=1;
showPics(index);


function showPics(n) {
    var i;
    var j = document.getElementsByClassName("gpic");
    if (n > j.length) {index = 1;}
    if (n < 1) {
        index = x.length;
    }
    for (i = 0; i < j.length; i++) {
        x[i].style.display = "none";
    }
    j[index-1].style.display = "block";
}

function showNext(x) {
    showPics(index += x);
}

At the document.getElementsByClassName() part somehow "j" doesn't get the elements. as you can see there . This is the html part of the problem:

<div position="relative" img=bigimg>
    <button position="absolute" id=leftbtn onclick="showNext(-1);"></button>
        <img class="gpic" src='../images/0.jpg'>
        <img class="gpic" src ='../images/1.jpg'>
        <img class="gpic" src ='../images/2.jpg'>
        <img class="gpic" src = '../images/3.jpg'>
        <img class="gpic" src ='../images/4.jpg'>
        <img class="gpic" src ='../images/5.jpg'>
        <img class="gpic" src ='../images/6.jpg'>
        <img class="gpic" src ='../images/7.jpg'>
        <img class="gpic" src ='../images/8.jpg'>
<button position="absolute" id=rightbtn onclick="showNext(1);"></button>

I don't know what causes the problem. I just trying to do something like this: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self

Are those buttons in a form? If so, the surprising default `type` is getting you: They *submit* the form. — T.J. Crowder, Aug 03 '17 at 15:27
Possibly related: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — charlietfl, Aug 03 '17 at 15:28
@Matthew: Er...there is that. :-) It would still be fine when clicked, though, if it weren't for the magic `x`. — T.J. Crowder, Aug 03 '17 at 15:28
What's `x`? (The one in `x[i].style.display = "none";`, not the other one.) Where is it declared, and where is it filled in? — T.J. Crowder, Aug 03 '17 at 15:28
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — chiliNUT, Aug 03 '17 at 15:32
Are you stopping the debugger right then when `j` gets assigned? — MinusFour, Aug 03 '17 at 15:32
Simple typo, You use it right after the loop and wrong inside the loop. Another issue could be where you have the script location. If it is in the head, it ain't going to find anything. — epascarello, Aug 03 '17 at 15:33

Sven Writes Code · Accepted Answer · 2017-08-03T15:56:44.890

Besides the variable x needing to be j, your code seems to work as intended. You also try to set an attribute position on a tag, and this is not doing what you intend. You either need to have the style attribute set <div style="position: relative">, or in CSS

div {
    position: relative;
}

Also, in your code, there is no closing </div> tag.

var index = 1;
showPics(index);

function showPics(n) {
  var i;
  var j = document.getElementsByClassName("gpic");
  if (n > j.length) {
    index = 1;
  }
  if (n < 1) {
    index = j.length;
  }
  for (i = 0; i < j.length; i++) {
    j[i].style.display = "none";
  }
  j[index - 1].style.display = "block";
}

function showNext(x) {
  showPics(index += x);
}

img {
  margin: 0 auto
}

#leftbtn {
  position: absolute;
  top: 75px;
}

#rightbtn {
  position: absolute;
  right: 0;
  top: 75px;
}

<div>
  <button id=leftbtn onclick="showNext(-1);">Prevoius</button>
  <img class="gpic" src='http://via.placeholder.com/350x150'>
  <img class="gpic" src='http://via.placeholder.com/340x150'>
  <img class="gpic" src='http://via.placeholder.com/330x150'>
  <img class="gpic" src='http://via.placeholder.com/320x150'>
  <img class="gpic" src='http://via.placeholder.com/310x150'>
  <img class="gpic" src='http://via.placeholder.com/300x150'>
  <img class="gpic" src='http://via.placeholder.com/290x150'>
  <img class="gpic" src='http://via.placeholder.com/280x150'>
  <img class="gpic" src='http://via.placeholder.com/270x150'>
  <button id=rightbtn onclick="showNext(1);">Next</button>
</div>

Oh thank you! Actually the div has a closing, sorry I did not mentioned it. The problem was with that silly positioning. Thank you for your help! — benzol, Aug 04 '17 at 00:45

score 0 · Answer 2 · answered Aug 03 '17 at 15:43

Your javascript should look like that:

var index=1;
showPics(index);

function showPics(n) {
    var i;
    var x = document.getElementsByClassName("gpic");
    if (n > x.length) {index = 1;}
    if (n < 1) {
        index = x.length;
    }
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[index-1].style.display = "block";
}

function showNext(x) {
    showPics(index += x);
}

There is was issue with declaring variable j instead of x as rest of your code suggest.

Var doesn't get elements from document.getElementsByClassName()

2 Answers2