Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Bug] Bug no arquivo JS

Referente ao curso JavaScript: validando formulários, no capítulo Capturando fotos e atividade Salvar foto

por Rainna Raphaela Soares de Souza
| 62.1k xp | 12 posts
Estudante

Olá,

Eu consegui tirar foto, mas na hora de enviar para aparecer a última página dar esse erro da imagem. Estou enviando também meu arquivo do js. Agradeço desde já. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Arquivo camera.js 

const botaoIniciarCamera = document.querySelector("[data-video-botao]");
const campoCamera = document.querySelector("[data-camera]");
const video = document.querySelector("[data-video]");
const botaoTirarFoto = document.querySelector("[data-tirar-foto]");
const canvas = document.querySelector("[data-video-canvas]");
const mensagem = document.querySelector("[data-mensagem]");
const botaoEnviarFoto = document.querySelector("[data-enviar]")

let imagemURL = '';

botaoIniciarCamera.addEventListener('click', async function () {
    const iniciarVideo = await navigator.mediaDevices
        .getUserMedia({ video: true, audio: false });

    botaoIniciarCamera.style.display = "none";
    campoCamera.style.display = "block";

    video.srcObject = iniciarVideo;
});

botaoTirarFoto.addEventListener('click', function () {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

    imagemURL = canvas.toDataURL('image/jpeg');

    campoCamera.style.display = "none";
    mensagem.style.display = "block";
});

botaoEnviarFoto.addEventListener('click', () => {
    const receberDadosExistentes = localStorage.getItem("cadastro");
    const converteRetorno = JSON.parse(receberDadosExistentes);

    converteRetorno.imagem = imagemURL;

    localStorage.setItem('cadastro', JSON.stringify(converteRetorno))

    window.location.href = '../pages/abrir-conta-form-3.html';
})
3 respostas
por Luis Dias
| 2388.3k xp | 1790 posts
Developer (⌐■_■)

OI, Rainna

O problema é que o valor de "converteRetorno" é nulo, linha 34

Então, pesquise o motivo de localStorage.getItem("cadastro") está vindo nulo

Verifique em "script.js" se o nome que vc para salvar o formulário foi "cadastro'

por Rainna Raphaela Soares de Souza
| 62.1k xp | 12 posts
Estudante

Olá, Luis Quando é iniciando da página 1 dar certo todas as páginas. Mas se eu aperto a partir da página 2, dar esse erro que eu disse anteriormente. Eu olhei meu script e está cadastro. Vou enviar aqui para ter certeza. 

import ehUmCPF from "./valida-cpf.js";
import ehMaiorDeIdade from "./valida-idade.js";

const camposDoFormulario = document.querySelectorAll('[required]')
const formulario = document.querySelector("[data-formulario]");

formulario.addEventListener("submit", (e) => {
    e.preventDefault(); 

    const listaRespostas = {
        "nome": e.target.elements["nome"].value, 
        "email": e.target.elements["email"].value, 
        "rg": e.target.elements["rg"].value, 
        "cpf": e.target.elements["cpf"].value, 
        "aniversario": e.target.elements["aniversario"].value
    }

    localStorage.setItem("cadastro", JSON.stringify(listaRespostas));

    window.location.href = './abrir-conta-form-2.html';
})

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", evento => evento.preventDefault());
})

const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patternMismatch',
    'tooShort', 
    'customError'
]

const mensagens = {
    nome: {
        valueMissing: "O campo de nome não pode estar vazio.",
        patternMismatch: "Por favor, preencha um nome válido.",
        tooShort: "Por favor, preencha um nome válido."
    },
    email: {
        valueMissing: "O campo de e-mail não pode estar vazio.",
        typeMismatch: "Por favor, preencha um email válido.",
        tooShort: "Por favor, preencha um e-mail válido."
    },
    rg: {
        valueMissing: "O campo de RG não pode estar vazio.",
        patternMismatch: "Por favor, preencha um RG válido.",
        tooShort: "O campo de RG não tem caractéres suficientes."
    },
    cpf: {
        valueMissing: 'O campo de CPF não pode estar vazio.',
        patternMismatch: "Por favor, preencha um CPF válido.",
        customError: "O CPF digitado não existe.",
        tooShort: "O campo de CPF não tem caractéres suficientes."
    },
    aniversario: {
        valueMissing: 'O campo de data de nascimento não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    },
    termos: {
        valueMissing: 'Você deve aceitar nossos termos antes de continuar.',
    }
}

function verificaCampo(campo) {
    let mensagem = "";
    campo.setCustomValidity(''); 
    if (campo.name == "cpf" && campo.value.length >= 11) {
        ehUmCPF(campo);
    }

    if (campo.name == "aniversario" && campo.value != "") {
        ehMaiorDeIdade(campo);
    }
    tiposDeErro.forEach(erro => {
        if(campo.validity[erro]) {
            mensagem = mensagens[campo.name][erro];
            console.log(mensagem); 
        }
    })
    const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');
    const validadorDeInput = campo.checkValidity(); 

    if (!validadorDeInput) {
        mensagemErro.textContent = mensagem; 
    } else {
        mensagemErro.textContent = "";
    }
}
solução!
por Luis Dias
| 2388.3k xp | 1790 posts
Developer (⌐■_■)

Rainna,

Seu código está ok. Eu testei

O problema é que, se vc inicia na segunda página, o "cadastro" ainda não foi criado no "storage"

Então: O "receberDadosExistentes" será nulo

Em consequência o "converteRetorno" também será nulo

E a msg de erro é que não pode ter propriedade "imagem" de nulo

Solução

No arquivo "camera.js", linha 32

// inclua no final a opção "|| {}"
const converteRetorno = JSON.parse(receberDadosExistentes) || {};

Se "receberDadosExistentes" for nulo, o "converteRetorno" será criado como objeto vazio e não tera mais o erro