Problem with Fuction js

Asked

Viewed 47 times

0

Within the Function montarTr error appears:

Cannot read Property 'account' of Undefined at montarTr

var botao = document.querySelector("#addConta");
botao.addEventListener("click", function(event) {
  event.preventDefault();

  // BUSCANDO O CONTEUDO DENTRO DO FORMS
  var form = document.querySelector("#formAdd");

  var trgastos = getValores(form);

  // CRIANDOO TR
  var createTr = montarTr(trgastos)

  // CRIANDO TD DENTRO DA TR


  // TODO O CONTEUDO DENTRO DA TR PASSA PARA TB 
  var tabela = document.querySelector("#table")

  tabela.appendChild(createTr);
});

function getValores(form) {
  var trgastos = {
    conta: form.conta.value,
    valor: form.valor.value,
    info: form.info.value,
    total: ""
  }

  return trgastos;
}

function montarTr(trgastos) {
  var createTr = document.createElement("tr");
  createTr.classList.add("trgastos");

  console.log(createTr);

  createTr.appendChild(montarTr(trgastos.conta, "info-conta"));
  createTr.appendChild(montarTr(trgastos.valor, "info-valor"));
  createTr.appendChild(montarTr(trgastos.info, "info"));
  createTr.appendChild(montarTr(trgastos.total, "info-total"));

  return createTr;

}

function montarTd(dado, classe) {
  var td = document.createElement("td");
  td.classList.add(classe);
  td.textContent = dado

  return td;
}
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/index.css">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/materialize.css">


  <title>Controle de Gastos</title>
</head>

<body>
  <table class="responsive-table">
    <thead>
      <tr class="tituloTb">
        <th>CONTA</th>
        <th>PREÇO</th>
        <th>INFO </th>
        <th>TOTAL</th>
      </tr>
    </thead>
    <tbody id="table">
      <tr id="trgastos">
        <td class="info-conta">Conta de luz</td>
        <td class="info-preco">R$:350,00</td>
        <td class="info">Mês 05</td>
        <td class="info-total">0</td>
      </tr>
    </tbody>
  </table>
  <section class="form">
    <div class="row">
      <form id="formAdd" class="col s12">
        <div class="input-field col s6">
          <input id="novaConta" name="conta" type="text" class="validate">
          <label for="novaConta" style="text-align: center;">Nova Conta</label>
        </div>

        <div class="input-field col s6">
          <input id="novoValor" name="valor" type="number" class="validate">
          <label for="novoValor" style="text-align: center;">Valor</label>
        </div>
    </div>

    <div class="row">
      <div class="input-field col s12">
        <input id="novainfo" name="info" type="text" class="validate">
        <label for="novainfo" style="text-align: center;">info</label>
      </div>
    </div>


    <button id="addConta" class="btn waves-effect waves-light" type="submit" name="action">Adicionar</button>
    </form>
  </section>
  <!--
  <script src="/js/form.js"></script>
  <script src="/js/calculo.js"></script>
-->
</body>

</html>

javascript

1 answer

0

The problem you have is in the montarTr() function, in which an infinite loop has been created.

As soon as you press the button, the montarTr function is triggered and receives the following object

{
    conta: 1,
    valor: 2,
    info: 3,
    total: ""
}

The function will be executed normally until the next line

createTr.appendChild(montarTr(trgastos.conta, "info-conta"));

In this line, the function mountTr will be called again, but this time the value passed to it will be 1, as soon as this execution is performed and it reaches that same line, the next value passed will be the account position of the whole 1, which is Undefined, and at the next run, an error is triggered as it is not possible to access a Undefined property.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.