Caros, quem pode me ajudar com uma dúvida? É possível eu ter duas páginas html com entradas de textos e/ou outras variáveis e apenas um js para executar as funções nas duas?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas
respostas
Duas paginas html e somente um js
Olá, Sergio!
Sim, é super possível como também é o mais comumente utilizado. Basta fazer a importação do arquivo Js em ambas as páginas HTML, assim o arquivo Js estará linkado à estas duas páginas e terá o acesso do DOM de ambas. Com isto você poderá executar as mesmas funções em páginas diferentes com um único arquivo Javascript :)
Obrigado. Gabriel. Valeu mesmo.
Gabriel, vou aproveitar e te perguntar mais uma. A minha dúvida surgiu sobre usar um mesmo JS para dois HTML´s pq em uma das páginas em que eu entro com uma palavra num campo para ser usada em uma função no JS dá o erro: Uncaught TypeError: Cannot read properties of null (reading 'getContext') na linha 3 do JS onde está declarada a variável para a tela do canvas. Já pesquisei em todo lugar e só encontrei a resposta de que o JS está carregando antes do HTML. Mas nao está, pois a ref. do JS está no final depois do
. Não sei mais o que fazer. Se souber e puder me ajudar fico muito agradecido.
Bom dia, Sergio!
Que bom que esteja praticando canvas e seu Contexto de Renderização em 2d, ajuda bastante a fortalecer a lógica de programação além de ser uma ferramenta extremamente útil. Agora este erro `Cannot read properties of null (reading 'getContext')` ocorre por dois motivos, ou foi chamado um método getContext em um elemento de tela inexistente, ou foi inserindo a tag de script JS acima do HTML, onde o elemento canvas é declarado. Este erro ocorre porque o Javascript não está conseguindo achar o contexto que foi passado para ele.
Para resolver o último problema, você deve inserir a tag script logo antes do do fechamento da tag body. Se assim como você disse no seu caso já fez isto, então foi fornecido um elemento que não existe para getContext, então o que devemos verificar no código?
Quando você faz a consulta/declaração do elemento no JS, tenha certeza que o elemento exista no arquivo HTML:
const canvas = document.getElementById('elemento-que-não-existe'); // Vai retornar null
const ctx = canvas.getContext('2d'); // Vai disparar o erro Cannot read properties of null (reading 'getContext')Observe que quando utilizamos o document.getElementById ou document.querySelector para selecionar o elemento no arquivo HTML, ou sendo mais didático, para selecionar o elemento no documento do HTML, você tem que ter declarado uma propriedade id ou a propriedade class para a tag em questão atribuindo o valor desejado:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<!-- ✅ id deve corresponder ao seu código JS -->
<canvas id="canvas" width="500" height="500"></canvas>
<script src="index.js"></script>
</body>
</html>
Perceba que o valor atribuido ao id foi canvas você pode escolher qualquer valor para o id, mas quando for selecionar no Javascript este elemento deve corresponder ao valor passado para propriedade id. Caso você esteja utilizando dois arquivos html o elemento deve existir em ambos e ter o mesmo valor, assim podemos selecionar o valor atríbuido ao id e não receber este erro:
const canvas = document.getElementById('canvas');Isto é se você realmente quiser exibir o elemento canvas em multiplas páginas, caso for apenas em uma você pode fazer um declaração assim:
if (elementoCanvas) { // Aqui vai a constante que está com getElementById
// Coloque todo código do canvas aqui dentro
} else {
return;
}
/* Aí você pode escrever outros códigos Javascript não relacionado ao
canvas ou até mesmo criar outro elemento */Ou separe o código do canvas em um arquivo JS diferente e faça a importação apenas na página que tenha o elemento canvas.
Recomendo ler este artigo Solve - Cannot read property 'getContext' of Null que foi onde me baseei para te responder, é um blog muito bacana que tem a solução de diversos erros em Javascript. Ele dá exemplos do que fazer ou do que não deve ser feito, há também o tutorial da w3schools no qual me ajudou bastante a aprender o Canvas.
Espero ter ajudado para que possa solucionar este erro. Bons estudos!
Gabriel, obrigado pela sua atenção. Mas eu não consegui fazer o erro desaparecer. Vou expor aqui o problema de de fato estou enfrentando.
Eu já gastei muito tempo tentando por minha conta pesquisando na web e não encontrei uma solução para o meu problema. Não sei se foi a melhor opção e fiquei apegado a isso, mas eu optei por três arquivos html e apenas um JS. A 1a pagina com os botões "Começar jogo" e "Adicionar nova palavra", a 2a página onde há o campo (input type="tesxt") para inserção da nova palavra com os botões "salvar e começar" e "voltar" e a 3a pag que é o jogo onde se desenha a forca, a palavra secreta é selecionada e se coloca os tracinhos de cada letra e se joga até ganhar ou perder com as respectivas msgs. Está tudo ok. Só não consigo fazer com que a palavra que eu insiro na 2a pag entrar no array das palavras salvas. Eu até consigo só que quando chamo a função para iniciar o jogo que carrega a 3a pag do jogo propriamente, o refresh ou reload da pag faz o array das palavras salvas voltar ao inicial. Além da 2a pg estar gerando o erro "Cannot read properties of null (reading 'getContext)". O erro aparece quando atualizo a 2a pg mas indica que está na linha de declaração da var tabuleiro = document.getElementById('forca').getContext('2d') do JS referente a 3a pag html (onde de fato foi declarado o canvas). Já checquei as 2 possvieis causas disso: posição tag script antes da tag body e elemento que não existe. Na 2apg não existe mesmo declaraçãod e canvas, mas o erro remete a da 3a pag. Por favor, como resolvo isso? Obrigado
solução!
Bom dia, Sergio!
Então, toda vez que você alterna de uma página para outra é realizado um novo carregamento na página, e assim os dados do seu array que estão no arquivo Javascript não ficam salvos já que um novo documento é gerado. Existem várias formas de se fazer este jogo, o ideal seria fazer este game em um único arquivo HTML ou em uma Single Page Application, por exemplo e assim este carregamento não ocorreria.
No seu caso, se você quiser garantir a persistência dos dados recomendo você salvar seu array no localStorage do navegador. Este recurso permite salvar apenas strings, portanto você terá que transformar seu array em uma string utilizando o método stringify, após isto terá que settar o array para o localStorage utilizando o método setItem:
palavrasSalvas = ['Oracle', 'Microsoft', 'Linux']
localStorage.setItem('palavrasSalvas', JSON.stringify(palavrasSalvas))Deste modo salvará o seu array de palavras salvas no localStorage como palavrasSalvas. Para resgatar o array novamente precisamos utilizar o getItem e converter novamente para um array com JSON.parse:
const pegarPalavrasSalvas = JSON.parse(localStorage.getItem('palavrasSalvas')Assim você pegou o array que foi salvo como string no localStorage e converteu novamente para array, podendo agora utilizá-lo novamente.
Aqui na Alura há um curso exatamente sobre este assunto:
A boa notícia é que há uma forma bem mais simples, sem precisar dar esta volta toda na qual você poderá utilizar apenas um arquivo HTML e um arquivo Javascript. Recomendo assistir o vídeo a seguir, tenho certeza que te ajudará muito, além de ser uma boa forma para fazer este jogo:
Gabriel. Fantástico. Bom mesmo. Eu acabaria indo mesmo para um arquivo HTML, mas eu queria tentar algo diferente. Muito obrigado. Meus problemas acabaram.