Struggling to utilize the global variable imageID to retrieve the value of getImage, but consistently encountering the error "Property 'imageID' does not exist on type 'HTMLElement'.". Desire to assign the HTMLELement to the global variable imageID. Is there a way to convert the variable to a string or another data type? Any recommendations or suggestions are greatly appreciated.
dashboard.component.ts
import {Component,Input,OnChanges,OnInit,SimpleChanges} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Emotion} from 'emotion';
import {EmotionService} from 'emotion.service';
@Component({
selector: 'dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
emotions: Emotion[] = [];
emotion: string;
imageID: any;
constructor(private emotionService: EmotionService) {}
ngOnInit() {
this.getEmotions();
// this.makeMatch();
//function to randomize and get 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';
} //for
} //hideDivs
hideDivs(images); // hide all initially
button.addEventListener('click', function(event) {
console.log('');
console.log('%c=============================', "color: blue");
console.log('%c In getFaces method', "color: blue", );
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!';
var getImage = (images[rnd] as HTMLElement);
//where error occurs
this.imageID = getImage.id;
// this.imageID as HTMLElement = images[rnd].getAttribute('alt');
console.log('%c Image ID for match making: ', imageID );
console.log('%cImage ID: ', "font-weight: bold", getImage.id);
// console.log('%cAll image data:', "font-weight: bold", images[rnd]);
console.log('%c=============================', "color: blue");
console.log('');
}) //button