CODEWITHSUNDEEP
javascripthtml
Cyzanfar
Cyzanfar

Reputation: 7136

JavaScript slider function not working when self invoked

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?

Upvotes: 0

Views: 102

Answers (3)

nirazul
nirazul

Reputation: 3955

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();
  }
});

Upvotes: 0

guest271314
guest271314

Reputation: 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>

Upvotes: 1

john Smith
john Smith

Reputation: 17926

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

Upvotes: 0

Related Questions