Skip to main content
adicionou 551 caracteres ao conteúdo
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221
addTourOverlay2() {

  // (1) 
  if (document.querySelectorAll('#tour-overlay').length === 0) {

    let newDiv = document.createElement('div');
    newDiv.id = 'tour-overlay';
    let body = document.getElementsByTagName('body');

    // (2)
    newDiv.appendChild(body);

  }
  this.resizeOverlay();
}

resizeOverlay() {
  let window_height = screen.height;
  let window_width = screen.width;

  // (3 e 4)
  document.getElementById('#tour-overlay').style.height = window_height;
  document.getElementById('#tour-overlay').style.width = window_width;

}

Começando com algumas falhas triviais:

  1. Se buscará pelo id é esperado que seja retornado apenas um elemento, não vários; então ao invés de querySelecorAll, pode utilizar querySelector apenas (ou o getElementById);

  2. Você adicionou body em newDiv; acredito que o correto seria newDiv em body;

  3. Quando utilizar getElementById você não precisa informar o caractere #, apenas o valor do atributo;

  4. Vide 3;

Sobre o erro

O tipo 'number' não pode ser atribuído ao tipo 'string'. (linhas 36 e 37)

Isso vem do Typescript, que leva em consideração os tipos dos dados. Nesse caso, screen.height é um valor numérico, mas element.style.height é uma string. O que você precisa fazer é declarar o cast entre os tipos:

document.getElementById('#tour-overlay').style.height = <string> window_height; 
document.getElementById('#tour-overlay').style.width = <string> window_width;
// Aqui você informa o cast da variável ----------------^
addTourOverlay2() {

  // (1) 
  if (document.querySelectorAll('#tour-overlay').length === 0) {

    let newDiv = document.createElement('div');
    newDiv.id = 'tour-overlay';
    let body = document.getElementsByTagName('body');

    // (2)
    newDiv.appendChild(body);

  }
  this.resizeOverlay();
}

resizeOverlay() {
  let window_height = screen.height;
  let window_width = screen.width;

  // (3 e 4)
  document.getElementById('#tour-overlay').style.height = window_height;
  document.getElementById('#tour-overlay').style.width = window_width;

}

Começando com algumas falhas triviais:

  1. Se buscará pelo id é esperado que seja retornado apenas um elemento, não vários; então ao invés de querySelecorAll, pode utilizar querySelector apenas (ou o getElementById);

  2. Você adicionou body em newDiv; acredito que o correto seria newDiv em body;

  3. Quando utilizar getElementById você não precisa informar o caractere #, apenas o valor do atributo;

  4. Vide 3;

addTourOverlay2() {

  // (1) 
  if (document.querySelectorAll('#tour-overlay').length === 0) {

    let newDiv = document.createElement('div');
    newDiv.id = 'tour-overlay';
    let body = document.getElementsByTagName('body');

    // (2)
    newDiv.appendChild(body);

  }
  this.resizeOverlay();
}

resizeOverlay() {
  let window_height = screen.height;
  let window_width = screen.width;

  // (3 e 4)
  document.getElementById('#tour-overlay').style.height = window_height;
  document.getElementById('#tour-overlay').style.width = window_width;

}

Começando com algumas falhas triviais:

  1. Se buscará pelo id é esperado que seja retornado apenas um elemento, não vários; então ao invés de querySelecorAll, pode utilizar querySelector apenas (ou o getElementById);

  2. Você adicionou body em newDiv; acredito que o correto seria newDiv em body;

  3. Quando utilizar getElementById você não precisa informar o caractere #, apenas o valor do atributo;

  4. Vide 3;

Sobre o erro

O tipo 'number' não pode ser atribuído ao tipo 'string'. (linhas 36 e 37)

Isso vem do Typescript, que leva em consideração os tipos dos dados. Nesse caso, screen.height é um valor numérico, mas element.style.height é uma string. O que você precisa fazer é declarar o cast entre os tipos:

document.getElementById('#tour-overlay').style.height = <string> window_height; 
document.getElementById('#tour-overlay').style.width = <string> window_width;
// Aqui você informa o cast da variável ----------------^
Fonte Link
Woss
  • 77,2mil
  • 15
  • 123
  • 221

addTourOverlay2() {

  // (1) 
  if (document.querySelectorAll('#tour-overlay').length === 0) {

    let newDiv = document.createElement('div');
    newDiv.id = 'tour-overlay';
    let body = document.getElementsByTagName('body');

    // (2)
    newDiv.appendChild(body);

  }
  this.resizeOverlay();
}

resizeOverlay() {
  let window_height = screen.height;
  let window_width = screen.width;

  // (3 e 4)
  document.getElementById('#tour-overlay').style.height = window_height;
  document.getElementById('#tour-overlay').style.width = window_width;

}

Começando com algumas falhas triviais:

  1. Se buscará pelo id é esperado que seja retornado apenas um elemento, não vários; então ao invés de querySelecorAll, pode utilizar querySelector apenas (ou o getElementById);

  2. Você adicionou body em newDiv; acredito que o correto seria newDiv em body;

  3. Quando utilizar getElementById você não precisa informar o caractere #, apenas o valor do atributo;

  4. Vide 3;