change image by click prev/next button

Question

I am trying to change images in "div" by clicking buttons as like "carousel", but could not done and codes does not throw any error. I could not yet understand what I am doing wrong.

I am calling java script function "setIndex" on clicking with parameters +1 or -1. In java code i simply change image source as required and simply put display='block' followed by image source.

but the theme is not working and does not change image.

Please help.

My codes are as under:

<!DOCTYPE html>
<html>
<head>
    <title>prev_next#</title>
</head>
<style>
    .divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }
</style>
<body>  
    <section id='Middle'>
        <div class="divContainer" id="divMiddle">
            <div id="divSlides">
                <img id="slideImage" src="../html-web/img/it-slide01.jpg">
                <a class="alink-left"   href="" onclick="setIndex(-1)"> < </a>
                <a class="alink-right"  href="" onclick="setIndex(+1)"> > </a>
            </div>
        </div>
    </section>
</body>
<script>
    var imageNo= 1;
    var ImageSource="";

    function setIndex(idx) {
        imageNo = imageNo + idx ;
        alert(imageNo)
        switch(imageNo){
            case 1:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide01.jpg';
              break;
            case 2:
              alert('case 2')
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide02.jpg';
              break;
            case 3:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide03.jpg';
              break;
            case 4:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide04.jpg';
              break;
            case 5:
              slideImage.display='none';
              ImageSource= '../html-web/img/it-slide05.jpg';
              break;
            case 6:
              slideImage.display='none';
              ImageSource= '../html-web/img/it-slide06.jpg';
              break;  
            default:
              slideImage.display='none';
              ImageSource='../html-web/img/it-slide01.jpg';
              if(imageNo>=6||imageNo<=1){imageNo=1}
              break;
        }  // switch
            document.getElementsByTagName('slideImage').display='block';
            document.getElementsByTagName('slideImage').src = ImageSource;
            //slideImage.display='block';
            //slideImage.src = ImageSource;
    } //function setIndex   
</script>
</html>

score 0 · Answer 1 · answered Jun 03 '20 at 05:22

I think this code would be better.

    var imageNo= 1
    var ImageSources=[
      '../html-web/img/it-slide01.jpg',
      '../html-web/img/it-slide02.jpg',
      '../html-web/img/it-slide03.jpg',
      '../html-web/img/it-slide04.jpg',
      '../html-web/img/it-slide05.jpg',
      '../html-web/img/it-slide06.jpg'
    ]

    function setIndex(idx) {
        imageNo = (imageNo + idx)%6
        console.log(imageNo)
        document.getElementById('slideImage').src = ImageSources[imageNo];
    } //function setIndex

    .divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>prev_next#</title>
</head>
<style>
    .divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }
</style>
<body>  
    <section id='Middle'>
        <div class="divContainer" id="divMiddle">
            <div id="divSlides">
                <img id="slideImage" src="../html-web/img/it-slide01.jpg">
                <a class="alink-left"   href="#" onclick="setIndex(-1)"> < </a>
                <a class="alink-right"  href="#" onclick="setIndex(1)"> > </a>
            </div>
        </div>
    </section>
</body>

</html>

Thanks. Your java script codes are quite professional. You had done in short quite sharply. many many thanks. hope to see you in my post again. — BinodBinani, Jun 03 '20 at 07:21

donkey · Answer 2 · 2020-06-03T06:07:50.777

The issue is your a href="" make page refresh, so just looking not change!

Add "#" in href like < a href="#">, then your code can work!

Looking below, check "your doing right already!" in js.

var imageNo= 1;
    var ImageSource="";
    var slideImage = document.getElementById('slideImage');
    function setIndex(idx) {
        imageNo = imageNo + idx ;
        switch(imageNo){
            case 1:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=1';
              break;
            case 2:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=2';
              break;
            case 3:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=3';
              break;
            case 4:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=4';
              break;
            case 5:
              slideImage.display='none';
              ImageSource= 'https://picsum.photos/100/100/?random=5';
              break;
            case 6:
              slideImage.display='none';
              ImageSource= 'https://picsum.photos/100/100/?random=6';
              break;  
            default:
              slideImage.display='none';
              ImageSource='https://picsum.photos/100/100/?random=7';
              if(imageNo>=6||imageNo<=1){imageNo=1}
              break;
        }  // switch
        //=====================================
        
        //your doing right already!
            //           document.getElementsByTagName('slideImage').display='block';
            // document.getElementsByTagName('slideImage').src = ImageSource;
            slideImage.display='block';  // <=
            slideImage.src = ImageSource; // <=
        //==========================
    } //function setIndex

.divContainer{
        width: 85%;
        margin: auto;
        overflow: hidden;
    }
    #Middle{
        min-height: 460px;
    }
    #divMiddle{
        width: 90%;
        margin: auto;
        border: 2px red solid; 
        overflow: hidden;
        max-height: 460px;
    } 
    #divSlides{
        float: left;
        width: 100%;
        max-height: 455px;
    }   
    #slideImage{
        height: 494px;
        width: 100%;
        margin: auto;
    }
    .alink-left, .alink-right{
        position: absolute;
        top:30%;
        width: auto;
        margin-top: 22px;
        font-size: 40px;
        color:red;
        border:none;
        user-select: none;
        border-radius: 3px 0 0 3px;
        text-decoration: none;
    }
    .alink-left{
       color:yellow;
       left:0;
       margin-left: 10%;    
    }
    .alink-right{
        color:red;
        right: 90px;
    }

<section id='Middle'>
        <div class="divContainer" id="divMiddle">
            <div id="divSlides">
                <img id="slideImage" src="https://picsum.photos/100/100/?random=1">
                <a class="alink-left"   href="#" onclick="setIndex(-1)"> < </a>
                <a class="alink-right"  href="#" onclick="setIndex(+1)"> > </a>
            </div>
        </div>
    </section>

================================

then

document.getElementsByTagName('slideImage')

return Array, and 'slideImage' is ID on your html not a tab.

How about document.getElementById('slideImage')?

Or just use slideImage? like you used before.

At last

Try use Array to save your images and use variable to save your object!

var imageNo= 0;
var slideImage = document.getElementById('slideImage');
function setIndex(idx) {
    imageNo = imageNo + idx ;
    alert(imageNo)
    let imagesArray = [ 'https://picsum.photos/100/100/?random=0',
                        'https://picsum.photos/100/100/?random=1',
                        'https://picsum.photos/100/100/?random=2',
                        'https://picsum.photos/100/100/?random=3',
                        'https://picsum.photos/100/100/?random=4',
                        'https://picsum.photos/100/100/?random=5',
                        'https://picsum.photos/100/100/?random=6'];

    slideImage.src = imagesArray[Math.abs(imageNo) % imagesArray.length];
}

Thanks a lot sir. IT WORKED!. your trick "Add "#" in href like < a href="#">" was wonderful for me as i am quite novice. Your way of expressing a thing is quite good that any one can understand. — BinodBinani, Jun 03 '20 at 07:24
https://stackoverflow.com/questions/7755088/what-does-href-expression-a-href-javascript-a-do Recommend to read this, A better solution. but most situation, '#' is ok and fast! — donkey, Jun 03 '20 at 07:46

change image by click prev/next button

2 Answers2