Meu código volta: Form submission canceled because the form is not connected. Não sei o que fazer.

Olá, Breno, tudo bem?

Primeramente desculpa pela demora a responder! Mas vamos lá para a solução do seu problema. Aliás, parabéns por criar seu próprio projeto para pôr em prática seus conhecimentos! Além disso, você foi atrás de novas funções para melhorar o seu projeto, continue assim!

Bem, o principal problema do programa está sendo causado pela função document.write na função calcular. Um problema dessa função é que ela sobrescreve todo o conteúdo de uma página que já foi carregada. Então a página está perdendo o formulário e por isso o erro "Form submission canceled because the form is not connected" está sendo imprimido.

Uma solução é substituir document.write pela função alert, para mostrar uma frase de resposta ao usuário. Dentro da sua função calcular, vamos usar o seguinte código:

        function calcular() {
            var taxaImunizados = calcularPorcentagem(totalImunizados, populacao)
            alert("Total de imunizados é " + taxaImunizados.toFixed(1) + "%" + "<br><br>");  // Trocamos para alert

            var casosAtivos = calcularCasosAtivos(ativosHoje, ativosAntes)
            alert("A porcentagem de aumento ou diminuição dos casos é " + casosAtivos.toFixed(1) + "%");  // Trocamos para alert
        }

Pronto, resolvemos o problema de sobrescever a página! Mas espere! Ainda estamos nos deparando com os seguintes erros:

Os números se tornaram NaN! O que está acontecendo? Bem, esse tipo de dado significa "Not a Number" (ou "Não é um número") e significa que houve algum erro ao guardar os números nas variáveis. Vamos investigar então onde pegamos esses dados:

        var totalImunizados = document.querySelector("#total-imunizados");

        var ativosHoje = document.querySelector("#ativos-hoje");

        var ativosAntes = document.querySelector("#ativos-antes");

Quer dizer então que a função querySelector não está funcionando? Não deveriam ser armazenados números nessas variáveis?

A questão é que agora que estamos usando essa função no lugar de prompt, devemos tomar um pouco mais de cuidado. Enquanto prompt recebe diretamente o que o usuário digitou, querySelector retorna o elemento HTML em si. Como assim?

Faça um teste: abra sua página no navegador, abra o console e digite, por exemplo, totalImunizados. Esperamos receber o seguinte:

Recebemos o elemento input! Ora, mas queremos apenas o valor que o usuário digitou, não o elemento inteiro! Mas não tema, para conseguir isso, no javascript podemos acessar a propriedade value dos elementos HTML. Então, na sua função calcular, vamos considerar o seu seguinte código:

        function calcular() {
            var taxaImunizados = calcularPorcentagem(totalImunizados, populacao)
            alert("Total de imunizados é " + taxaImunizados.toFixed(1) + "%" + "<br><br>");

            var casosAtivos = calcularCasosAtivos(ativosHoje, ativosAntes)
            alert("A porcentagem de aumento ou diminuição dos casos é " + casosAtivos.toFixed(1) + "%");
        }

E trocar por esse:

        function calcular() {
            var taxaImunizados = calcularPorcentagem(totalImunizados.value, populacao) // Pegamos o value do elemento
            alert("Total de imunizados é " + taxaImunizados.toFixed(1) + "%"); // Tiramos os <br> já que não precisamos mais deles

            var casosAtivos = calcularCasosAtivos(ativosHoje.value, ativosAntes.value)  // Pegamos os values dos elementos
            alert("A porcentagem de aumento ou diminuição dos casos é " + casosAtivos.toFixed(1) + "%");
        }

Você também pode testar totalImunizados.value, ativosHoje.value e ativosAntes.value no console e ver que imprimem o valor atual dentro dos campos! (mas algo precisa estar digitado dentro deles)

É isso, agora o programa está totalmente funcional!

Em caso de dúvida, aqui está o código completo do script:

        function calcularPorcentagem(vacinadosDuasDoses, populacao) {
            return (vacinadosDuasDoses / populacao) * 100;
        };

        function calcularCasosAtivos(casosHoje, casosAntes) {
            return ((casosHoje - casosAntes) / casosAntes) * 100;
        }

        function calcular() {
            var taxaImunizados = calcularPorcentagem(totalImunizados.value, populacao)
            alert("Total de imunizados é " + taxaImunizados.toFixed(1) + "%");

            var casosAtivos = calcularCasosAtivos(ativosHoje.value, ativosAntes.value)
            alert("A porcentagem de aumento ou diminuição dos casos é " + casosAtivos.toFixed(1) + "%");
        }

        var totalImunizados = document.querySelector("#total-imunizados");

        totalImunizados.focus();

        var ativosHoje = document.querySelector("#ativos-hoje");

        var ativosAntes = document.querySelector("#ativos-antes");

        var populacao = 68990;

        var botao = document.querySelector(".calcular");

        botao.onclick = calcular;

Note que alguns conceitos aqui são um pouco mais avançados e algumas alterações exigirão mais do seu conhecimento na linguagem! Por exemplo, se você usar console.log no lugar de alert, perceberá que os dados aparecerão no console muito rapidamente e sumirão. Deixo como exercício você investigar isso! (Dica: estude a função preventDefault)

Espero ter te ajudado! Bons estudos :)