CODEWITHSUNDEEP
javascriptarraysimagesortingonclick
Taj
Taj

Reputation: 107

How to set order to arrays when I click next and previous on JavaScript?

I want to create a image viewer where you click next and previous to change the image. So far the buttons next and previous changes the image. However when I click next then previous, the image doesn't go to the previous image instead it goes to the starting image.

My guess is to create a variable var = newImage and use that variable on function change2() and create a new varirable var= newImage2 and use that on function change().

is that possible? 

<!DOCTYPE html>
<html>
<head>
    <title>JS ChangeImage</title>
</head>
<body>
    <h1 align="center">Change Image</h1>
    <br>
    <div class= "container" align="center">
        <button onclick="change2()">Previous</button>
        <img src="html5.png" style="height: 500px; width: 500px" id="changeimg">
        <button onclick="change()">Next</button>
    </div>

</body>
<script>

    var img=0;
    var imgArr = ["html5.png","css3.png","javascript.png"]

    function change() {
        var image = document.getElementById('changeimg');
        console.log("current image =>", imgArr[img])
        document.getElementById('changeimg').src =imgArr[img];
        if (img== 2) img = 0;
        else
            img++;
    }

    function change2() {
        var c1= 
        document.getElementById('changeimg').src =imgArr[img];
        console.log("current image =>", imgArr[img])
        if (img== 0) img = 2;
        else
            img--;
    }

Upvotes: 1

Views: 114

Answers (1)

AutoTurtle
AutoTurtle

Reputation: 36

First, I noticed that you are changing the img variable after assigning the image to the element. I think you should switch the order. The way it is now, when you click Next, the number advances, but the picture is associated with the previous number. If you then click Previous, the number will reduce, but the image will appear to advance.

I've made some other changes for simplicity here:

HTML:

<h1 align="center">Change Image</h1>
<br>
<div class= "container" align="center">
    <button onclick="change(event)" name='1'>Previous</button>
    <img src="html5.png" style="width: 500px" id="changeimg">
    <button onclick="change(event)" name='2'>Next</button>
</div>

JS:

var currentImg = 0;
const imgArr = ["html5.png","css3.png","javascript.png"]

const change=(event)=>{
    if(event.target.name==='1'){
        currentImg>0?currentImg--:currentImg=2;
    } else if(event.target.name==='2'){
        currentImg<imgArr.length-1?currentImg++:currentImg=0;
    }
    console.log(currentImg);
    document.getElementById('changeimg').src = imgArr[currentImg];
}

Please note the use of the 'name' attribute of the for use in the logic of the change function. This allows me to use only one function for both buttons. I hope this helps.

Upvotes: 1

Related Questions