1

Poderiam por gentileza me ajudar?

Estou tentando usar as propriedades de um objeto, porem a propriedade "aliqInterna" está dando o erro abaixo.

st-tabela.js:6 Uncaught TypeError: Cannot read property 'value' of undefined
    at obtemParametros (st-tabela.js:6)
    at HTMLButtonElement.<anonymous> (st-tabela.js:38)

Linha 6: aliqInterna: form.aliquotaInterna.value Linha 38: var obter = obtemParametros(form);

JS

function obtemParametros(form){
    var parametros = {
        tipo: form.tipo.value,
        estado: form.estado.value,
        aliqInterna: form.aliquotaInterna.value
    }
    return parametros;
}

var tipo = document.getElementById("tipo");
var estado = document.getElementById("estado");
var aliquotaInterna = document.getElementById("aliquota-interna");

var botao = document.getElementById("botao");

botao.addEventListener("click", function(event){
    event.preventDefault();
    var form = document.querySelector("#entradas");
    var obter = obtemParametros(form);
    console.log(obter);
});

HTML

        <form id="entradas" class="entradas">
            <label name="tipo">Tipo</label>
            <select id="tipo">
                <option name="contribuinte" value="0">Contribuinte</option>
                <option name="nao-contribuinte" value="1">Não Contribuinte</option>
            </select>

            <label>Estado</label>
            <select id="estado">
                <option name="AC" value="1">Acre</option>
                <option name="AL" value="2">Alagoas</option>
                <option name="AP" value="4">Amapá</option>
                <option name="AM" value="3">Amazonas</option>
                <option name="BA" value="5">Bahia</option>
                <option name="CE" value="6">Ceara</option>
                <option name="DF" value="7">Distrito Federal</option>
                <option name="ES" value="8">Espirito Santo</option>
                <option name="GO" value="9">Goias</option>
                <option name="MA" value="10">Maranhão</option>
                <option name="MT" value="13">Mato Grosso</option>
                <option name="MS" value="12">Mato Grosso do Sul</option>
                <option name="MG" value="11">Minas Gerais</option>
                <option name="PA" value="14">Para</option>
                <option name="PB" value="15">Paraíba</option>
                <option name="PR" value="18">Paraná</option>
                <option name="PE" value="16">Pernambuco</option>
                <option name="PI" value="17">Piauí</option>
                <option name="RJ" value="19">Rio de Janeiro</option>
                <option name="RN" value="20">Rio Grande do Norte</option>
                <option name="RS" value="23">Rio Grande do Sul</option>
                <option name="RO" value="21">Rondonia</option>
                <option name="RR" value="22">Roraima</option>
                <option name="SC" value="24">Santa Catarina</option>
                <option name="SE" value="25">Sergipe</option>
                <option name="TO" value="26">Tocantins</option>
            </select>

            <label>Aliquota Interna</label>
            <input id="aliquota-interna" value="18"/>
        </form>

1 Resposta 1

2

Os elementos de formulário terão as propriedades de campos de acordo com os seus IDs. Então, se um formulário tiver um input com o ID name, o formulário terá uma propriedade name, que irá corresponder ao elemento do input#name.

Desse modo, o erro está sendo criado tendo em vista que a propriedade é aliquota-interna, e não aliquotaInterna, como você está fazendo. Aparentemente você pensou que as propriedades são convertidas para o formato snakeCase, o que não é o caso. Em suma, você deve mudar:

form.aliquotaInterna.value

Para

form['aliquota-interna'].value

Ou mudar o atributo id do input.


Assim:

function obtemParametros(form){
    var parametros = {
        tipo: form.tipo.value,
        estado: form.estado.value,
        aliqInterna: form['aliquota-interna'].value
    }
    return parametros;
}

var tipo = document.getElementById("tipo");
var estado = document.getElementById("estado");
var aliquotaInterna = document.getElementById("aliquota-interna");

var botao = document.getElementById("botao");

botao.addEventListener("click", function(event){
    event.preventDefault();
    var form = document.querySelector("#entradas");
    var obter = obtemParametros(form);
    console.log(obter);
});
<form id="entradas" class="entradas">
   <label name="tipo">Tipo</label>
   <select id="tipo">
      <option name="contribuinte" value="0">Contribuinte</option>
      <option name="nao-contribuinte" value="1">Não Contribuinte</option>
   </select>
   <label>Estado</label>
   <select id="estado">
      <option name="AC" value="1">Acre</option>
      <option name="AL" value="2">Alagoas</option>
      <option name="AP" value="4">Amapá</option>
      <option name="AM" value="3">Amazonas</option>
      <option name="BA" value="5">Bahia</option>
      <option name="CE" value="6">Ceara</option>
      <option name="DF" value="7">Distrito Federal</option>
      <option name="ES" value="8">Espirito Santo</option>
      <option name="GO" value="9">Goias</option>
      <option name="MA" value="10">Maranhão</option>
      <option name="MT" value="13">Mato Grosso</option>
      <option name="MS" value="12">Mato Grosso do Sul</option>
      <option name="MG" value="11">Minas Gerais</option>
      <option name="PA" value="14">Para</option>
      <option name="PB" value="15">Paraíba</option>
      <option name="PR" value="18">Paraná</option>
      <option name="PE" value="16">Pernambuco</option>
      <option name="PI" value="17">Piauí</option>
      <option name="RJ" value="19">Rio de Janeiro</option>
      <option name="RN" value="20">Rio Grande do Norte</option>
      <option name="RS" value="23">Rio Grande do Sul</option>
      <option name="RO" value="21">Rondonia</option>
      <option name="RR" value="22">Roraima</option>
      <option name="SC" value="24">Santa Catarina</option>
      <option name="SE" value="25">Sergipe</option>
      <option name="TO" value="26">Tocantins</option>
   </select>
   <label>Aliquota Interna</label>
   <input id="aliquota-interna" value="18"/>
   
   <button id="botao">Enviar</button>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .