I am struggling to identify the image currently displayed onscreen for a matching game. Despite trying various variables such as img and images[], I keep receiving undefined in the console log. Any suggestions on how to determine which image is being shown? Thanks.
Furthermore, this is a typescript application that involves some JavaScript code
dashboard.ts
ngOnInit() {
//function to randomize and retrieve face images
var w = document.getElementById('wrapper');
var button = document.getElementById('randomize');
var images = w.children; // inner elements, your image divs
// a function to hide all divs
var hideDivs = function(imgs: HTMLCollection) {
for (var img of < any > imgs) {
(img as HTMLElement).style.display = 'none';
}
}
hideDivs(images); // initially hide all
button.addEventListener('click', function(event) {
var rnd = Math.floor(Math.random() * images.length); // get random index
hideDivs(images); // hide all images
(images[rnd] as HTMLElement).style.display = 'block'; // show random image
(event.target as HTMLElement).textContent = 'Click one more time!';
console.log("NEED THE OUTPUT OF CURRENTLY DISPLAYED IMAGE HERE:" + );
})
}
dashboard.html
<div id="wrapper" align="center">
<img class="happy" img src='../../assets/happy.PNG' alt="happy" img id="happy">
<img class="sad" img src='../../assets/sad.PNG' alt="sad" img id="sad">
<img class="embarrassed" img src='../../assets/embarrassed.PNG' alt="embarrassed" img id="embarrassed">
<img class="sleepy" img src='../../assets/sleepy.PNG' alt="sleepy" img id="sleepy">
<img class="stressed" img src='../../assets/stressed.PNG' alt="stressed" img id="stressed">
<img class="suprised" img src='../../assets/suprised.PNG' alt="suprised" img id="suprised">
<img class="excited" img src='../../assets/excited.PNG' alt="excited" img id="excited">
</div>
<button id='randomize' onClick = "this.style.visibility= 'hidden';" class="btn btn-success btn-block">START GAME</button>