Home/ Questions/Q 7886687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T05:22:54+00:00

I am a true rookie in JS, I have this code, in the body

  • 0

I am a true rookie in JS, I have this code, in the body of my HTML:

  var secDuration = 5;
  var image = 1;
  var maxImages = 4;
  var slider = document.getElementById('slider');

 function changeImage(requiredImage) {


    if (!requiredImage && requiredImage != 0){
      if(image < maxImages){
        image++;
      }
      else{
        image = 1;
      }
    }
    else{ 
      if(requiredImage > maxImages){
        image = 1;
      }
      else if(requiredImage < 1){ 
        image = maxImages;
      }
      else{
        image = requiredImage;
      }
    }
    slider.className = "image"+image;

    clearTimeout(timeout)
  }

  function nextImage(){
    changeImage(image+1);
  }
  function prevImage(){
    changeImage(image-1);
  }

  changeImage(1);

The trouble is that when i paste it in a js file which i properly connect to my HTML, the script does not work anymore.
I tried several solutions, but i’m propbably missing something. Help would be gladly appreciated.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The valid embedding of JavaScript file is:

    <html>
<head>
    ...
    <script type="text/javascript" src="/path/to/script.js"></script>
</head>
<body>
    ...
</body>
</html>

    Make sure that your have done in the same way.

    Then, you have to work with elements from your HTML page when your page is fully loaded, so move statements like document.getElementById in window.onload method:

    window.onload = function() {
    slider = document.getElementById('slider');
};

    So, your updated script should look like this:

    var image = 1;
var maxImages = 4;
var slider;

function changeImage(requiredImage) {
    if (!requiredImage && requiredImage != 0) {
        if (image < maxImages) {
            image++;
        }
        else {
            image = 1;
        }
    }
    else {
        if (requiredImage > maxImages) {
            image = 1;
        }
        else if (requiredImage < 1) {
            image = maxImages;
        }
        else {
            image = requiredImage;
        }
    }
    slider.className = "image" + image;

    clearTimeout(timeout)
}

function nextImage() {
    changeImage(image + 1);
}

function prevImage() {
    changeImage(image - 1);
}

window.onload = function() {
    slider = document.getElementById('slider');
    changeImage(1);
};​
    • 0