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

createElement is not defined

Boa noite! Ao tentar criar a TR e as TDs para incluir na tabela recebo esse erro (Uncaught ReferenceError: createElement is not defined)

Podem me ajudar?

function obtemFormulario(formulario){

    var negociacao = {
        data: formulario.data.value,
        quantidade: formulario.quantidade.value,
        valor: formulario.valor.value
    };
    return negociacao;
}

function criaTr(negociacao){

    var tr = document.createElement("tr");
    tr.classList.add("negociacao");
    tr.appendChild(montaTd(negociacao.data, "info-data"));
    tr.appendChild(montaTd(negociacao.quantidade, "info-quantidade"));
    tr.appendChild(montaTd(negociacao.valor, "info-valor"));
    return tr;
}

function montaTd(dado, classe){
    var td = createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}


var botaoIncluir = document.querySelector("#botao-incluir");
botaoIncluir.addEventListener("click",function(event){
    event.preventDefault();
    var formulario = document.querySelector(".form");
    var negociacao = obtemFormulario(formulario);
    var trNegociacao = criaTr(negociacao);
    var tabela = document.querySelector("#tabela-negociacoes");
    tabela.appendChild(trNegociacao);
});
    <div class="form-group">
        <label for="data">Data</label>
        <input type="date" id="data" class="form-control" required autofocus/>        
    </div>    

    <div class="form-group">
        <label for="quantidade">Quantidade</label>
        <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
    </div>

    <div class="form-group">
        <label for="valor">Valor</label>
        <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
    </div>

    <button id="botao-incluir" class="btn btn-primary" type="submit">Incluir</button>
</form>

<div class="text-center">
    <button class="btn btn-primary text-center" type="button">
        Importar Negociações
    </button>
    <button class="btn btn-primary text-center" type="button">
        Apagar
    </button>
</div> 
<br>
<br>

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th>DATA</th>
            <th>QUANTIDADE</th>
            <th>VALOR</th>
            <th>VOLUME</th>
        </tr>
    </thead>

    <tbody id="tabela-negociacoes">


    </tbody>

    <tfoot>
    </tfoot>
</table>
<script src="js/adicionar-negociacao.js"></script>
3 respostas
solução!

Boa noite, Marco! Como vai?

Veja que a sua função montaTd() está assim:

function montaTd(dado, classe){
    var td = createElement("td");
    td.textContent = dado;
    td.classList.add(classe);
    return td;
}

Contudo, o correto seria fazer document.createElement("td")!

Faça essa correção aí e verifique se as coisas funcionarão da forma como vc esperava!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Boa noite!

Nossa passou batido essa. Deu certo.

Obrigado pela ajuda.

Por nada, Marco! Sempre que tiver qualquer dúvida é só mandar aqui no fórum da Alura!

Grande abraço e bons estudos, meu aluno!