0

Estou criando um timer para contar dias, horas, minutos e segundos a partir de uma data. A data fica na página home.html e o relógio em outra página clock.html ambas com o script modulado para cada.

Na página home o script está assim:

export { calendar }
const calendar = document.querySelector('#calendar').value;

No qual o Id 'calendar' corresponde ao input type date.

Na página clock o script está assim:

import { calendar } from '/components/home.js';

const dataSplit = calendar.split('/');
const day = dataSplit[0];
const month = dataSplit[1];
const year = dataSplit[2]

const data = new Date(year, month - 1, day)

const data1 = new Date();
const data2 = data;

const diff = Math.abs(data1.getTime() - data2.getTime());

Mesmo com os módulos criados ele segue dando o valor null. Já conferi no html se o id está certo. Já até tentei fazer um toString() e mesmo assim não funcionou. O que estou fazendo de errado?

2 Respostas 2

1

Talvez careça um pouco de contexto. Mas aqui algumas coisas que vc deve corrigir:

  1. Vc está exportando o calendar antes da definição dele, vc pode trocar por:
const calendarEl = document.getElementById('calendar');
const calendarValue = calendarEl ? calendarEl.value : 0;

export calendarEl;
export calendarValue;

Para importar

import { calendarValue } from '/components/home.js';

Porem cabe aqui dizer que se vc importar home.js fora da pagina Home (que tem o elemento calendar) o calendarValue vai ser executado baseado no seu contexto presente. Ou seja, ele vai procurar na sua pagina CORRENTE se existe um elemento com o ID calendar. Se vc tem o calendar em uma pagina html e quer o valor dele em OUTRA pagina html, vc precisar fazer com que o valor escolhido no calendar seja passado para a proxima pagina via GET parameters. Basicamente vc fara com que o input de calendario esteja em um form, e a action do form deverá apontar para a próxima pagina:

Ex:

Pagina 1 - Seleciona o datetime no calendario, e clica enter -> O Form da pagina faz o GET do form de calendario para pagina 2

Pagina 2 - Recebe o GET e o endereço ficara mais ou menos assim: 'http://whatever/pagina2?calenda=123' (endereço meramente ilustrativo). Veja o parametro ?calendar na URL, ele é o parametro GET que veio da URL anterior. Daí no seu código vc deve ler esse paremetro e usar como quiser.

Em termos de contexto vc nao consegue exportar dinamicamente ou acessar uma pagina anterior (ou dados dela) dentro do historico. (Existem exceções de contexto pra essa minha afirmação para iframes, SPAs e afins. Mas em termos de paginas html separadas não será possível).

Referencia para passar parametros de uma pagina para a outra: https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

Em ultima instancia, lembre-se de adicionar o JS de manipulação de pagina no final antes de fechar a tag Body, (se estiver adicionando dessa forma), assim vc evita ter que adicionar eventos pra esperar a pagina carregar e ter seus elementos disponíveis no DOM. Caso contrário, ou vc adiciona eventos pra esperar a pagina carregar (desnecessariamente), ou realmente os seletores retornarão null na maior parte das vezes.

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 14/04/2022 às 16:57
0

Como o Felippe falou, o seu export está errado. Além disso exportar um valor primitivo assim pode levar a erros, pois você não sabe em que momento esse elemento está sendo pego. Pode refatorar pro seguinte:

const getCalendar = () => document.querySelector('#calendar')
export { getCalendar }
1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 14/04/2022 às 19:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .