Struggling with errors in the TypeScript implementation, specifically:
- Error TS2339: Property 'style' does not exist on type 'Element'. (dashboard.component.ts line 49)
- Error TS2339: Property 'textContent' does not exist on type 'EventTarget'. (dashboard.component.ts line 50)
Although this code works seamlessly as a JavaScript function, it encounters the mentioned errors when adapted for TypeScript. I have attempted changing 'var' to 'let' and adding '.', but no luck so far. Any other suggestions or solutions would be greatly appreciated. Thank you.
dashboard.ts
var w = document.getElementById('wrapper');
var button = document.getElementById('randomize');
var image = w.children; // inner elements, your quotes divs
// a function to hide all divs
var hideDivs = function(divs) {
for (var div of divs) {
div.style.display = 'none';
}
}
hideDivs(image); // hide all initially
// on click
button.addEventListener('click', function(event) {
var rnd = Math.floor(Math.random() * image.length); // get random index
hideDivs(image); // hide all quotes
image[rnd].style.display = 'block'; // show random quote
event.target.textContent = 'Click one more time!'; // set button text. event.target is the button you've clicked
})
dashboard.html
<div id="wrapper">
<div class="image" img scr='../../assets/mood.jpg'></div>
<div class="image" img scr='../../assets/mood.jpg'></div>
<div class="image" img scr='../../assets/mood.jpg'></div>
<div class="image" img scr='../../assets/mood.jpg'></div>
<div class="image" img scr='../../assets/mood.jpg'></div>
</div>
<button id='randomize'>Next</button>