Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Modificar elemento filho do innerHTML

Olá, não achei minha dúvida em nenhum tópico, caso tenha peço desculpas.

Temos a parte do código onde inserimos o template(model) via innerHTML. Estou tentando fazer aparecer o resultado da tabela em um Modal. Esse Modal tem o estado .modal{ display:none } e ao dar Submit no formulário eu não consigo via Javascript dar um display block nesta classe. No console o resultado da div modal é: undefined. Ou seja, como se ela não existisse na árvore do DOM.

Vocês poderiam me ajudar com isso?

7 respostas

Oi Ronaldo, onde esta o seu Código ? Pode compartilhá-lo?

Mas sugiro você terminar os 3 cursos antes de modificar seu projeto. Até porque ainda há muita coisa a aprender que pode lançar uma luz sob este problema. Por exemplo , você saca de delegação ? Pois é algo que você aprenderá.

Outro ponto é que criar modal demanda de conhecimentos sólidos de CSS. Nada errado em querer deixar a app top, mas você vai focar mais em css do que js e essa não é a proposta do curso.

Ok Flávio, eu ainda não acabei o terceiro módulo, talvez seja nessa parte que você fale sobre isso. De qualquer forma segue um exemplo: https://jsfiddle.net/qte36u34/1/

Obrigado!

Essa instrução

var elementDynamic = document.getElementById('teste').style.background = 'red';

Sempre vai retornar undefined porque quem retorna algo é document.getElementById('teste'). Antes de retornar você aplicou valores em propriedade e propriedades não são funções e logo não possuem retorno.

O mais correto seria:

var elementDynamic = document.getElementById('teste');
elementDynamic.style.background = 'red';
console.log(elementDynamic);

Só que nesse seu exemplo você esta usando o pre-historico getElementById.

Eu não uso isso no curso. Aliás você também não criou um controller. Acho que é um teste mais de conceito, né? Se for, tá tranquilo.

Sim, é apenas um teste. Porém você observou que ele não aplica o style no elemento criado via innerHTML?

solução!

Porque você usou getElementById para pesquisar por classe. Não funciona.

putz desculpe pelo erro no exemplo rs. Mas de qualquer forma me ajudou, pois percebi que estava pegando a classe do modal dentro do constructor() do controller.

Então eu fiz dessa forma, e funcionou:

adiciona(event) {

        event.preventDefault();
        this.listaNegociacoes.adiciona(this._criaNegociacao());
        this._clearForm();
        let modal = document.querySelector('.modal');
        modal.style.display = 'block';
    }

Muito Obrigado!

Excelente ! Gostei do lance do modal. Sucesso e bom estudo Ronaldo!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software