altitudeup altitudeup - 3 months ago 16
Javascript Question

how to onclick for pairs of images randomly in javascript?

/* egg & broke egg pair1 lite & broke lite pair2 pot & frys pair3 */


I would like to know how to make the images pair up or team up. So when you click the egg image it disappears and the broken egg appears. Then this image should also disappear then and one of the other two teams appear randomly lite click lite broke lite appears and disappears randomly and click pot it turns into frys then frys disappears and turns into a random team.

</head>

<body onLoad="setRandomImage()">

<img id="egg.png" src= "http//"onClick="setRandomImage();"/>
<img id="brokeEgg.png" src= "https://" style="display:none"/>

<img id="lite.png" src= "http://" style="display:none"/>
<img id="brokeLite.png" src= "http://" style="display:none"/>

<img id="pot.jpg" src= "https://style="display:none"/>
<img id="frys.jpg" src= "http://style="display:none"/>


<script type="text/javascript">



var myShapes= ["egg.png","brokeEgg.png","lite.png","brokeLite.png","pot.jpg","frys.jpg" ];



function setRandomImage() {

var imgElem = document.getElementById("egg.png")

imgElem.setAttribute('src',myShapes[Math.floor(Math.random()*6)]);


};

</script>

Answer

Here's a very simplified one by making use of HTML data-* attributes, but take in consideration:

  • The value data-image-seq attribute must be img followed by a number.
  • These numbers must be sequenced

Updated

jsFiddle

var imgs = document.querySelectorAll('.imgs-wrapper img'),
  currentIMG = 1;

// attach click events on odd images only, egg, lite, pot, hi1, hello1
for (var i = 0; i < imgs.length; i += 2) {
  addEvent(imgs[i], 'click');
}

function addEvent(element, event) {
  element.addEventListener(event, function() {
    var imgSeq = element.getAttribute('data-image-seq'),
      nextImgSeq, nextImg, shownIMG;

    imgSeq = parseInt(imgSeq.replace('img', ''), 10);
    nextImgSeq = (imgSeq < imgs.length) ? (imgSeq + 1) : 1;
    nextImg = 'img[data-image-seq=img' + nextImgSeq + ']';
    element.style.display = 'none';
    shownIMG = document.querySelector(nextImg);
    shownIMG.style.display = 'block';
    setTimeout(function() {
      shownIMG.style.display = 'none';
      showRandomImg();
    }, 1000);
  });
}

function showRandomImg() {
  var randomIMG = returnRandomOddNum();
  randomIMG = (randomIMG !== currentIMG) ? randomIMG : returnRandomOddNum();
  currentIMG = randomIMG;
  randomIMG = 'img[data-image-seq=img' + randomIMG + ']';
  document.querySelector(randomIMG).style.display = 'block';
}

function returnRandomOddNum() {
  var randomNum = Math.floor(Math.random() * imgs.length);
  randomNum = (randomNum % 2 != 0) ?  randomNum : randomNum + 1;
  return randomNum;
}
.imgs-wrapper { position: relative; }
.imgs-wrapper { cursor: pointer; }
.hide-me { display: none; }
<div class="imgs-wrapper">
  <img data-image-seq="img1" src="//dummyimage.com/150x50?text=egg">
  <img data-image-seq="img2" src="//dummyimage.com/150x50?text=broke egg" class="hide-me">
  <img data-image-seq="img3" src="//dummyimage.com/150x50?text=lite" class="hide-me">
  <img data-image-seq="img4" src="//dummyimage.com/150x50?text=broke light" class="hide-me">
  <img data-image-seq="img5" src="//dummyimage.com/150x50?text=pot" class="hide-me">
  <img data-image-seq="img6" src="//dummyimage.com/150x50?text=frys" class="hide-me">
  <img data-image-seq="img7" src="//dummyimage.com/150x50?text=Hi1" class="hide-me">
  <img data-image-seq="img8" src="//dummyimage.com/150x50?text=Hi2" class="hide-me">
  <img data-image-seq="img9" src="//dummyimage.com/150x50?text=Hello1" class="hide-me">
  <img data-image-seq="img10" src="//dummyimage.com/150x50?text=Hello2" class="hide-me">
</div>

Comments