attribute selector not changing attribute

Question

I'm just trying to make a very very simple image slider. The finished product would have an img in the center of the page with an arrow img on either side. When you click on them it should move to the next img or start over again if at the end and vice versa for the beginning. What I'm trying to do is hold the image src strings I want to slide through in an array. Then I've written a function to go through the array. I am at the very beginning and I wrote out a line to change the attribute of an image to the first image but when I run it the attribute doesn't change.

my html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="container">
    <img id="prev" src="../Content Slider/images/rsz_back-button.png">
    <div id="slider">
        <h2>Meet our Dolls</h2>
        <div class="slide">
            <h1>Echo</h1>
            <img id="image" src="#">
        </div>
    </div>
    <img id="next" src="../Content Slider/images/rsz_forward-button.png">
</div>
</body>
</html>

My jJQuery

'use strict';
$(document).ready(function(e) { 
    var images = [
        "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_a0615655ad9ed49f75bf617e2df6a47c.jpg",
        "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_0000053222_20081110111439.jpg",
        "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_dollhouse-tv-show-2.jpg",
        "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_1alan-tudyk-transformers.jpg"
    ];

    var currentImage = selectImage();
    var incrementer =-1;

    function selectImage(){
        if(incrementer < 4){
            incrementer = incrementer +1;
            return incrementer;
        } else {
            incrementer = -1;
            selectImage();
        }
    }

    //get first slide
    $('#image').attr('src',images[currentImage]);
});

Answer 1

You need to define the function and variable in such a way that both of their scope exists when used:

var images = [
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_a0615655ad9ed49f75bf617e2df6a47c.jpg",
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_0000053222_20081110111439.jpg",
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_dollhouse-tv-show-2.jpg",
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_1alan-tudyk-transformers.jpg"
    ];

  function selectImage(){
        if(incrementer < 4){
            incrementer = incrementer +1;
            return incrementer;}
        else{
            incrementer = -1;
            selectImage();}         
}

var incrementer =-1;
var currentImage = selectImage();

//get first slide
$('#image').attr('src',images[currentImage]);

Working Demo

attribute selector not changing attribute

Question

1 answers

solution1
0 ACCPTED 2015-11-06 06:51:49

attribute selector not changing attribute

Question

1 answers

solution1 0 ACCPTED 2015-11-06 06:51:49

solution1
0 ACCPTED 2015-11-06 06:51:49