Why this const is undefined when it should be?

I have a form that gets the calculation of the insurance of a vehicle, I have reduced the code to only show the problem that I have (so if you see it incomplete it is because I reduced it).

My problem is that I have two input type radio, this for the user to choose one of two options and the problem comes when I try to pass the value of that constant from the "quoteInsurance" function to the prototype "UI.prototype.showResult", when I read other constants like "year", "brand", this one gets the result, but when I do it with "selectedType" then it says the value is undefined.

const form = document.querySelector("#cotizar-seguro");

function eventlisteners(){

    form.addEventListener("submit", quoteInsurance);


function Insurance(brand, year, type) {
    this.brand = brand;
    this.year = year;
    this.type = type;

//Constructor object for the UI
function UI() {};

//prototype to show in the html the result of the calculation and the info of the Auto

UI.prototype.showResult = (insurance) => {
    const {brand, year, selectedType} = insurance;

//instance ui

const ui = new UI();

function quoteInsurance(e) {
    //read selected brand
    const brand = document.querySelector("#marca").value;

    //read selected year
    const year = document.querySelector("#year").value;

    //read selected type
    const selectedType = document.querySelector('input[name="tipo"]:checked').value;

    //Initialize insurance
    const insurance = new Insurance(brand, year, selectedType);

    //we use the prototype to show result
body {
    background: #e96443;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #904e95, #e96443);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #904e95, #e96443); 
.btn.btn-raised.btn-primary {
    background-color: #00838F!important;
    font-size: 16px;
    width: 100%;
    padding: 15px;
.error {
    background-color: #FBE9E7;
    border: 1px solid #F4511E;
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    color: #F4511E;
.correcto {
    background-color: rgb(211, 249, 187);
    border: 1px solid rgb(50, 167, 0);
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
    color: rgb(4, 150, 50);
.error p {
#contenido {
    margin-top: 60px;
    background-color: white;
    -webkit-box-shadow: 0px 21px 46px -15px rgba(0,0,0,1);
    -moz-box-shadow: 0px 21px 46px -15px rgba(0,0,0,1);
    box-shadow: 0px 21px 46px -15px rgba(0,0,0,1);
.contenido-formulario {
    margin-top: 30px;
#cargando {
    text-align: center;
#cargando img {
    display: none;
    margin: 0 auto;
#resultado  {
    margin-bottom: 40px;
#resultado div {
    border: 1px solid #26C6DA;
    text-align: center;
    padding: 0  0 20px 0;
#resultado div p {
    margin-bottom: 0;
#resultado div p.header {
    background-color: #26C6DA;
    margin-bottom: 10px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: bold;

.spinner {
    margin: 50px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
  .spinner > div {
    background-color: #26C6DA;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  .spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  .spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  .spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  .spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  @-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
  @keyframes sk-stretchdelay {
    0%, 40%, 100% { 
      transform: scaleY(0.4);
      -webkit-transform: scaleY(0.4);
    }  20% { 
      transform: scaleY(1.0);
      -webkit-transform: scaleY(1.0);
<!DOCTYPE html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/custom.css">
<div class="container mx-auto">
      <div id="contenido" class="pb-10">
            <header class="bg-teal-500 text-white py-3 font-bold uppercase">
                <h1 class="text-center">Cotiza tu seguro de Auto</h1>
                <form class="mt-10 max-w-lg mx-auto" action="#" id="cotizar-seguro">
                        <div class="flex items-center mb-5">
                              class="font-bold  uppercase mr-2 w-20"
                            <select class="flex-1 bg-gray-100 p-3 appearance-none" id="marca">
                                <option value="">- Seleccionar -</option>
                                <option value="1">Americano</option>
                                <option value="2">Asiatico</option>
                                <option value="3">Europeo</option>
                        <div class="flex items-center mb-5">
                                class="font-bold  uppercase mr-2 w-20"
                              <select  class="flex-1 bg-gray-100 p-3 appearance-none" id="year">
                                <option value="2022">2022</option>
                              <legend  class="font-bold  uppercase text-2xl text-center w-full">Tipo Seguro</legend>

                              <div class="flex justify-around mt-5">
                                      <label class="font-bold  uppercase mr-2">Básico</label>
                                          <input type="radio" name="tipo" value="basico" checked>
                                      <label class="font-bold  uppercase mr-2">Completo</label>
                                          <input type="radio" name="tipo" value="completo">

                  <div id="cargando" class="hidden">
                        <div class="spinner">
                          <div class="rect1"></div>
                          <div class="rect2"></div>
                          <div class="rect3"></div>
                          <div class="rect4"></div>
                          <div class="rect5"></div>
                  <div id="resultado"></div>
                  <div class="flex  justify-center py-4">
                        class="mx-auto bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-20 rounded"
                        >Cotizar Seguro
      </div> <!--#contenido-->

  <script src="js/app.js"></script>
  <script src="https://cdn.tailwindcss.com"></script>

>Solution :

Just change the selectedType to type

UI.prototype.showResult = (insurance) => {
    const {brand, year, type} = insurance;

Read more about destructing assignment..

Leave a Reply