CODEWITHSUNDEEP
javascriptarraysonclick
user3161409
user3161409

Reputation: 1

Onclick function Javascript to Access Array Contentaing Image names

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"];
};

Upvotes: 0

Views: 233

Answers (3)

exreplay
exreplay

Reputation: 26

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>

Upvotes: 0

Joe Rinehart
Joe Rinehart

Reputation: 763

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>

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

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"];
}

Upvotes: 1

Related Questions