Onclick function Javascript to Access Array Contentaing Image names

Question

I'm trying to create a simple function that changes a large image when you click on a thumbnail. The names of the large images are held in two arrays. However instead of inserting the correct file name it puts only the first letter.

arrayName[arrayOrder] evaluates as t or m when I expect it to be the full string and I can't figure out why that would be. Can anyone help?

HTML

<body onload="createImageArrays()">
  <div id="displayImage">
    <img src="images/tshirt1.jpg">
  </div>
  <div id ="thumbnails">
    <img src="images/tshirtthumb1.jpg"  onclick="imageSwap('tshirtArray', 0)">
    <img src="images/tshirtmodelthumb1.jpg" onclick="imageSwap('modelArray',0)">
  </div>
...

JS

function imageSwap(imageArrayName, imageArrayNumber){
  var oldImage = document.getElementById('displayImage');
  var arrayOrder = imageArrayNumber;
  var arrayName = imageArrayName;
  //var newImage = arrayName[arrayOrder];
  oldImage.innerHTML='<img src="images/' + arrayName[arrayOrder] +'"</img>';
  window.alert('arrayName[arrayOrder]');
}

function createImageArrays(){
  var tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"];
  var modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"];
};

techfoobar · Accepted Answer · 2014-01-09 12:57:03Z

1

Firstly, you are passing strings instead of the actual arrays.

It should be:

... onclick="imageSwap(tshirtArray, 0)"
... onclick="imageSwap(modelArray,0)"

instead of

... onclick="imageSwap('tshirtArray', 0)"
... onclick="imageSwap('modelArray',0)

Secondly, your arrays are local to the function where they are created. Move them out so that the they are accessible outside.

var tshirtArray, modelArray;
function createImageArrays(){
    tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"];
    modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"];
}

answered Jan 9, 2014 at 12:57

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Rinehart · Accepted Answer · 2014-01-09 12:58:49Z

You're also scoping the image arrays as local to createImageArrays(). Scope them globally (not really the best, but...) and reference them in imageSwap, not their names:

<body onload="createImageArrays()">
<div id="displayImage">
    <img src="images/tshirt1.jpg">
</div>
<div id ="thumbnails">
    <img src="images/tshirtthumb1.jpg"  onclick="imageSwap(tshirtArray, 0)">
    <img src="images/tshirtmodelthumb1.jpg" onclick="imageSwap(modelArray,0)">
</div>

<script>

function imageSwap(imageArrayName, imageArrayNumber){
    var oldImage = document.getElementById('displayImage');
    var arrayOrder = imageArrayNumber;
    var arrayName = imageArrayName;
    //var newImage = arrayName[arrayOrder];
    oldImage.innerHTML='<img src="images/' + arrayName[arrayOrder] +'"</img>';

    window.alert('arrayName[arrayOrder]');
}

function createImageArrays(){
    tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"];
    modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"];
};
</script>

exreplay · Accepted Answer · 2014-01-09 13:15:24Z

The reason why only the first letter is inserted is because your arrayName is a string and you only insert the first char of the string. The other reason is that your arrays are not global, so you are not allowed to access them in your function. When you want to access one of the two arrays then simply use a switch/case oder if/elseif condition to find out what array should be used. Hope this will help you:

<body onload="createImageArrays()">
    <div id="displayImage">
        <img src="images/tshirt1.jpg">
    </div>
    <div id ="thumbnails">
        <img src="images/tshirtthumb1.jpg"  onclick="imageSwap('tshirtArray', 0)">
        <img src="images/tshirtmodelthumb1.jpg" onclick="imageSwap('modelArray',0)">
    </div>

    <script type="text/javascript">
        var tshirtArray;
        var modelArray;

        function imageSwap(imageArrayName, imageArrayNumber){
            var oldImage = document.getElementById('displayImage');
            var imageName;
            if(imageArrayName == "tshirtArray")
                imageName = tshirtArray[imageArrayNumber];
            else if(imageArrayName == "modelArray")
                imageName = modelArray[imageArrayNumber];

            //var newImage = arrayName[arrayOrder];
            oldImage.innerHTML='<img src="images/' + imageName +'"</img>';

            window.alert('arrayName[arrayOrder]');
        }

        function createImageArrays(){
            tshirtArray=["tshirtmodel1.jpg","tshirtmodel2.jpg","tshirtmodel3.jpg"];
            modelArray=["tshirt1.jpg","tshirt2.jpg","tshirt3.jpg"];
        };
    </script>
</body>

Collectives™ on Stack Overflow

Onclick function Javascript to Access Array Contentaing Image names

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related