alexa

Why this const is undefined when it should be js ?

Why this const is undefined when it should be js ?

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


242 0
7

Write a Comments


* Be the first to Make Comment

GoodFirms Badge
GoodFirms Badge

Fix Your Meeting With Our SEO Consultants in India To Grow Your Business Online

Facebook
Twitter
LinkedIn
Instagram
Whatsapp
Call Now
Quick Inquiry