JavaScript slider function not working when self invoked

Question

I'm trying to implement a slider using Javascript only (no external libraries like jQuery).

Here is my HTML file:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
<script language="javascript" type="text/javascript" src="slider.js"></script>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<div class="container main-container">
    <div id="container">
        <img id='slider-img' src='images/img1.png'>
        <div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
        <div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
    </div>
</div>

</body>
</html>

JS slider file:

(function() {
    slider();

})();

    function slider(element) {
        var imagecount = 1;
        var totalimage = 11;
        var image = document.getElementById("slider-img");
        imagecount = imagecount + element;
        image.src = "images/img" + imagecount + ".png";
    }

I'm getting an error at image.src cannot set property src of null because document.getElementById("slider-img"); can't get the element img of the html code. Anybody have some insight on this issue?

You don't have a document ready function, you have a self invoking function that doesn't wait for anything at all — adeneo, Jun 07 '15 at 21:46
true that, so how can I wait until the whole document finishes to load. — Cyzanfar, Jun 07 '15 at 21:47
Thanks for calling that out. That doesn't solve the problem though. — Cyzanfar, Jun 07 '15 at 21:48

guest271314 · Accepted Answer · 2015-06-07T22:50:37.403

1

var imagecount = 1;
function slider(element) {
  var totalimage = 11;
  var image = document.getElementById("slider-img");
  imagecount = imagecount < totalimage ? imagecount + Number(element) : 1;
  if (imagecount < 1) {
    imagecount = 1;
  };
  image.src = "images/img" + imagecount + ".png";
  console.log(imagecount)
}

window.onload = function() {
  slider(0)
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- Latest compiled and minified CSS -->
  <script language="javascript" type="text/javascript" src="slider.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

<body>

  <div class="container main-container">
    <div id="container">
      <img id='slider-img' src='images/img1.png'>
      <div id='left_holder'>
        <img onclick="slider(-1)" class='left' src="images/arrow_left.png">
      </div>
      <div id='right_holder'>
        <img onclick="slider(1)" class='right' src="images/arrow_right.png">
      </div>
    </div>
  </div>

</body>

</html>

edited Jun 07 '15 at 22:50

answered Jun 07 '15 at 21:50

guest271314

1
15
104
177

Getting a TypeError now : `Cannot set property 'onload' of null` – Cyzanfar Jun 07 '15 at 21:52
@Cyzanfar See updated post. Attached `onload` event to `window` – guest271314 Jun 07 '15 at 21:53
Note that window.onload is not equivalent to document.ready. Onload is after all assets have loaded, document ready after the DOM has been parsed (much earlier). – nirazul Jun 07 '15 at 21:53
1

you reset imagecount with `imagecount = imagecount + element;` further down your script. `element` is undefined, `imagecount + undefined` results in `NaN`. – nirazul Jun 07 '15 at 22:01
@Cyzanfar See updated post. Added `Number()` with `element` as argument at `imagecount = imagecount + Number(element);` ; called initial `slider()` with `0` as argument. – guest271314 Jun 07 '15 at 22:03
Lastly... After clicking once on the `img` of class `right` (arrow_right.png), image2.png is revealed but now nothing happens when I click on the arrow_img again nothing happens. any idea why that's happening? – Cyzanfar Jun 07 '15 at 22:25
@Cyzanfar See updated post. Moved `imagecount` outside of `slider` ; reset `imagecount` to `1` if `imagecount` greater than `totalimage` , or less than `1` . – guest271314 Jun 07 '15 at 22:51

score 0 · Answer 2 · answered Jun 07 '15 at 21:50

change your markup so that the script is loaded right before the body ends

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<div class="container main-container">
    <div id="container">
        <img id='slider-img' src='images/img1.png'>
        <div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
        <div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
    </div>
</div>
<script language="javascript" type="text/javascript" src="slider.js"></script>
</body>
</html>

so all the html is parsed when your script is executed

score 0 · Answer 3 · edited May 23 '17 at 12:21

You can use the document.ready snippet from this answer:
What is the non-jQuery equivalent of '$(document).ready()'?

In your case:

function slider(element) {
    var imagecount = 1;
    var totalimage = 11;
    var image = document.getElementById("slider-img");
    imagecount = imagecount + element;
    image.src = "images/img" + imagecount + ".png";
}

document.attachEvent("onreadystatechange", function(){
  if (document.readyState === "complete"){
    document.detachEvent( "onreadystatechange", arguments.callee );

    slider();
  }
});

JavaScript slider function not working when self invoked

3 Answers3