如何确定已从数组调用了哪个值以在另一个函数中使用？

Question

I have the below code which is called onclick, and want to be able to show a second image after a few seconds, depending on which one is chosen from the array - so for example if 1.png is shown, then I want to show 1s.png, 2.png then show 2s.png etc

    function displayImage () {
            var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
            var l = img_name.length;
            var rnd_no = Math.floor(l*Math.random());
            document.getElementById("imgHolder").src = img_name[rnd_no];
            }

How do I determine which image has been chosen from the array to then use in another function please ?

Answer 1

You're gonna need a global var for knowing that function is running for the first time or not.

var alreadyRandom = false;

function displayImage()
{
  var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
  if(alreadyRandom)
  {
    // If the random for first time is done
    var rnd_no = img_name.indexOf(document.getElementById("imgHolder").getAttribute('src'));
    if(rnd_no === img_name.length-1)
    {
      // If the current image is the last one in array,
      // go back to the first one
      rnd_no = 0;
    }
    else
    {
      // Choose the next image in array
      rnd_no++;
    }
    document.getElementById("imgHolder").src = img_name[rnd_no];
  }
  else
  {
    var l = img_name.length;
    var rnd_no = Math.floor(l*Math.random());
    document.getElementById("imgHolder").src = img_name[rnd_no];
    alreadyRandom = true; // Tell the function not to random again
  }
  return img_name[rnd_no];
}

Demo: http://jsbin.com/kanejugahi/edit?html,js,console,output

Moreover, making the array global would make your function more efficient.

Hope this helps,

Answer 2

I think it's important you understand how Functions work in JavaScript and how scope works.

What you need to do is you need to expose that information so that both functions have access. You have the array of images defined and you have already determined the random number so just make them available by declaring them outside of the function so now these variables are available. Defining variables in the global scope is generally bad practice but this is simply for teaching.

 var selectedImage; // defined outside so it is available for other functions function displayImage() { var img_name = new Array("images/1.png", "images/2.png", "images/3.png"); var rnd_no = Math.floor(img_name.length * Math.random()); selectedImage = img_name[rnd_no]; document.getElementById("imgHolder").src = selectedImage; } function anotherFunction() { console.log(selectedImage); } 

Answer 3

As far as I understand the question, you can use a return and make the image array global.

var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var img_class = '';
//this function will return the index of the image in array
function displayImage () {
   var l = img_name.length;
   var rnd_no = Math.floor(l*Math.random());
   document.getElementById("imgHolder").src = img_name[rnd_no];
   return rnd_no;
}

var nextimage;
function showImages(){
     //your logic to show the next image here
     nextimage = (displayImage ()+1)%img_name.length;
     var myVar = setInterval(function(){
     if(img_class==''){
        document.getElementById("imgHolder").src = img_name[nextimage];
        img_class = 's';
     }else{
        var img_arr = img_name[nextimage].split(".");
        if(img_arr.length===2){
           document.getElementById("imgHolder").src = img_arr[0]+"s."+img_arr[1];
        }

        img_class = '';
        nextimage = (nextimage+1)%img_name.length;
     }


   }, 1000);
}

 var img_name = new Array("images/1.png", "images/2.png", "images/3.png"); var img_class = ''; //this function will return the index of the image in array function displayImage () { var l = img_name.length; var rnd_no = Math.floor(l*Math.random()); document.getElementById("imgHolder").src = img_name[rnd_no]; return rnd_no; } var nextimage; function showImages(){ //your logic to show the next image here nextimage = (displayImage ()+1)%img_name.length; var myVar = setInterval(function(){ if(img_class==''){ document.getElementById("imgHolder").innerHTML = img_name[nextimage]; img_class = 's'; }else{ var img_arr = img_name[nextimage].split("."); if(img_arr.length===2){ document.getElementById("imgHolder").innerHTML = img_arr[0]+"s."+img_arr[1]; } img_class = ''; nextimage = (nextimage+1)%img_name.length; } }, 1000); } showImages(); 

 <div id="imgHolder"></div> 

Answer 4

Mayve something like this?

var images = ["images/1.png", "images/2.png", "images/3.png"];
function displayImage () {
    var dom = document.getElementById("imgHolder");
    if ( images.indexOf(dom.src) >=0 ) {
        dom.src = dom.src.replace(".png", "s.png"); // Seems like a stupid way to do this
        return;
    }
    var l = images.length;
    dom.src = images[Math.floor(l*Math.random())];
}