Error with Object Properties

Question

Would you be so kind as to help me?

I am trying to use the properties of an object, but the property "aliqInterna" is giving the error below.

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)

Row 6: aliqInterna: form.aliquotaInterna.value Line 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>

Answer 1

Form elements will have field properties according to their Ids. So, if a form has a input with the ID name, the form will have a property name, which will match the input#name.

Thus, the error is being created because the property is aliquota-interna, and not aliquotaInterna, how you are doing. Apparently you thought the properties are converted to the format snakeCase, which is not the case. In short, you should change:

form.aliquotaInterna.value

To

form['aliquota-interna'].value

Or change the attribute id of input.

---

Thus:

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>