Property 'style' does not exist on type 'Element'

Question

here the code

  function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

I got error - Property 'style' does not exist on type 'Element'.

How can fix this.

Answer 1

It's a bit of a pain. :-) The problem is that documents can contain both HTML elements ( HTMLElement ) and other kinds of elements, so the various DOM methods can only assume the type Element for what they return, not HTMLElement . Element doesn't have a style property.

Separately, once you resolve the issue with x[n] , you'll have an issue with the fact that getElementById can return null .

If you're only dealing with HTML elements, you might give yourself some convenience wrappers that (at least in dev mode) test the assertion that the results are HTML elements, so you can then assume they are in later code:

Here's a rough and ready example:

// An assertion type guard that throws if given a non-HTMLElement
function assertHTMLElement(el: Element): asserts el is HTMLElement {
    if (!(el instanceof HTMLElement)) {
        throw new Error(`Element is not an HTML element`);
    }
}

// A "get element by ID" that requires an HTMLElement and that the
// element does exist (never returns `null`)
function gid(id: string): HTMLElement {
    const el = document.getElementById(id);
    if (el === null) {
        throw new Error(`No element with id "${id}" found`);
    }
    assertHTMLElement(el);
    return el;
}

// A "query selector all" that ensures all matching elements are HTMLElements
function qsa(selector: string): HTMLElement[] {
    const list = document.querySelectorAll(selector);
    return Array.prototype.map.call(list, el => {
        assertHTMLElement(el);
        return el;
    }) as HTMLElement[];
}

Then your code would use them:

function showTab(n: number) {
    // This function will display the specified tab of the form...
    const x = qsa(".tab");
    x[n].style.display = "block";
    //... and fix the Previous/Next buttons:
    if (n == 0) {
        gid("prevBtn").style.display = "none";
    } else {
        gid("prevBtn").style.display = "inline";
    }
    if (n == (x.length - 1)) {
        gid("nextBtn").innerHTML = "Submit";
    } else {
        gid("nextBtn").innerHTML = "Next";
    }
    // ...
}

Playground link

Note I've also added a type to n , since it was defaulting to any .

---

Side note: I'd suggest using classes rather than inline styling.