Quick Inquiry

Why this const is undefined when it should be js ?

Yogesh Kumar
03-May-2022
0

You define type (not selectedType) in Insurance

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

When you instantiate Insurance, the 3rd param from selectedType is assigned to type

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

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


//eventlisteners
eventlisteners();
function eventlisteners(){

    form.addEventListener("submit", quoteInsurance);
}



//functions

//constructors
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, type} = insurance;
    console.log(brand);
    console.log(type); //it should be `type` (not `selectedType`)
};    

//instance ui

const ui = new UI();


function quoteInsurance(e) {
    e.preventDefault();
    
    //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
    ui.showResult(insurance);
    
};

 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 {
    margin:0;
}
#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;
    color:white;
    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">
  <head>
    <!-- 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">
  </head>
  <body>
<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>
            </header>
                <form class="mt-10 max-w-lg mx-auto" action="#" id="cotizar-seguro">
                        <div class="flex items-center mb-5">
                            <label 
                              class="font-bold  uppercase mr-2 w-20"
                              for="marca"
                            >Marca:</label>
                            <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>
                            </select>
                        </div>
                        <div class="flex items-center mb-5">
                              <label 
                                class="font-bold  uppercase mr-2 w-20"
                                for="year"
                              >Año:</label>
                              <select  class="flex-1 bg-gray-100 p-3 appearance-none" id="year">
                                <option value="2022">2022</option>
                              </select>
                        </div>
                        <fieldset>
                              <legend  class="font-bold  uppercase text-2xl text-center w-full">Tipo Seguro</legend>

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

                  <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>
                  </div>
                  <div id="resultado"></div>
                  <div class="flex  justify-center py-4">
                      <button 
                        type="submit" 
                        class="mx-auto bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-20 rounded"
                        >Cotizar Seguro
                    </button>
                  </div>
 
                </form> 
      </div> <!--#contenido-->
</div>

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

Run code snippet