error TS2339: JavaScript to Typescript error

Question

ERROR in src/app/dashboard.component.ts(49,15): error TS2339: Property 'style' does not exist on type 'Element'. src/app/dashboard.component.ts(50,16): error TS2339: Property 'textContent' does not exist on type 'EventTarget'.

This works as a javascript function, but the above are the errors I get when I try to use this in typescript. I have tried changing var to let and adding . any other suggestions? Thanks.

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>

Titian Cernicova-Dragomir · Accepted Answer · 2018-03-29 12:24:32Z

6

The problem is that target is typed as EventTarget, and an element of image which is a HTMLCollection is typed as Element. Both of the properties you want to access are defined on HTMLElement. The simplest thing you can do is to use a type assertion to tell the compiler that in your case both of these are actually HTMLElement

// 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] as HTMLElement).style.display = 'block'; // show random quote
    (event.target as HTMLElement).textContent = 'Click one more time!'; // set button tqext. event.target is the button you've clicked
})

Yo might also want to type hideDivs correctly as well :

// a function to hide all divs
const hideDivs = function (divs : HTMLCollection) {
    for (var div of divs) {
        (div as HTMLElement).style.display = 'none';
    }
}

edited Mar 29, 2018 at 12:24

answered Mar 29, 2018 at 12:19

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Durga Over a year ago

Update hideDivs() function as well. ;)

Titian Cernicova-Dragomir Over a year ago

@Durga true, that did not cause an error (since divs is implicitly typed as any) . Updated the answer :)

Katie Kennedy Over a year ago

Thank you for your help. That compiles successfully but now all divs appear and the error within the console.log is "ERROR TypeError: Cannot read property 'children' of null"

Titian Cernicova-Dragomir Over a year ago

@KatieKennedy strange... the onlu place you use children is w.children, i did not touch that .. where does w come from ? are you sure it is not undefined ?

Katie Kennedy Over a year ago

w is used to get the ID of the wrapper enclosing the images. var w = document.getElementById('wrapper');

|

Collectives™ on Stack Overflow

error TS2339: JavaScript to Typescript error

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related