Why this const is undefined when it should be?-CodePudding

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.

//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, selectedType} = insurance;
    console.log(brand);
    console.log(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 >
      <div id="contenido" >
            <header >
                <h1 >Cotiza tu seguro de Auto</h1>
            </header>
                <form  action="#" id="cotizar-seguro">
                        <div >
                            <label 
                              
                              for="marca"
                            >Marca:</label>
                            <select  id="marca">
                                <option value="">- Seleccionar -</option>
                                <option value="1">Americano</option>
                                <option value="2">Asiatico</option>
                                <option value="3">Europeo</option>
                            </select>
                        </div>
                        <div >
                              <label 
                                
                                for="year"
                              >Año:</label>
                              <select   id="year">
                                <option value="2022">2022</option>
                              </select>
                        </div>
                        <fieldset>
                              <legend  >Tipo Seguro</legend>

                              <div >
                                  <div>
                                      <label >Básico</label>
                                          <input type="radio" name="tipo" value="basico" checked>
                                      </label>
                                  </div>
                                  <div>
                                      <label >Completo</label>
                                          <input type="radio" name="tipo" value="completo">
                                      </label>
                                  </div>
                              </div>
                      </fieldset>

                  <div id="cargando" >
                        <div >
                          <div ></div>
                          <div ></div>
                          <div ></div>
                          <div ></div>
                          <div ></div>
                      </div>
                  </div>
                  <div id="resultado"></div>
                  <div >
                      <button 
                        type="submit" 
                        
                        >Cotizar Seguro
                    </button>
                  </div>
 
                </form> 
      </div> <!--#contenido-->
</div>

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

CodePudding user response：

Just change the selectedType to type

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

CodePudding user response：

The reason it is undefined is because in the function Interface, selectedType is cast to a variable with a different name, type. If you change selectedType to type in UI.prototype.showResult it works as expected as can be seen here:

//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);
};

//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 >
    <div id="contenido" >
      <header >
        <h1 >Cotiza tu seguro de Auto</h1>
      </header>
      <form  action="#" id="cotizar-seguro">
        <div >
          <label  for="marca">Marca:</label>
          <select  id="marca">
            <option value="">- Seleccionar -</option>
            <option value="1">Americano</option>
            <option value="2">Asiatico</option>
            <option value="3">Europeo</option>
          </select>
        </div>
        <div >
          <label  for="year">Año:</label>
          <select  id="year">
            <option value="2022">2022</option>
          </select>
        </div>
        <fieldset>
          <legend >Tipo Seguro</legend>

          <div >
            <div>
              <label >Básico</label>
              <input type="radio" name="tipo" value="basico" checked>
            </div>
            <div>
              <label >Completo</label>
              <input type="radio" name="tipo" value="completo">
            </div>
          </div>
        </fieldset>

        <div id="cargando" >
          <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
          </div>
        </div>
        <div id="resultado"></div>
        <div >
          <button type="submit" >Cotizar Seguro
                    </button>
        </div>

      </form>
    </div>
    <!--#contenido-->
  </div>

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

</html>

CodePudding user response：

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 >
      <div id="contenido" >
            <header >
                <h1 >Cotiza tu seguro de Auto</h1>
            </header>
                <form  action="#" id="cotizar-seguro">
                        <div >
                            <label 
                              
                              for="marca"
                            >Marca:</label>
                            <select  id="marca">
                                <option value="">- Seleccionar -</option>
                                <option value="1">Americano</option>
                                <option value="2">Asiatico</option>
                                <option value="3">Europeo</option>
                            </select>
                        </div>
                        <div >
                              <label 
                                
                                for="year"
                              >Año:</label>
                              <select   id="year">
                                <option value="2022">2022</option>
                              </select>
                        </div>
                        <fieldset>
                              <legend  >Tipo Seguro</legend>

                              <div >
                                  <div>
                                      <label >Básico</label>
                                          <input type="radio" name="tipo" value="basico" checked>
                                      </label>
                                  </div>
                                  <div>
                                      <label >Completo</label>
                                          <input type="radio" name="tipo" value="completo">
                                      </label>
                                  </div>
                              </div>
                      </fieldset>

                  <div id="cargando" >
                        <div >
                          <div ></div>
                          <div ></div>
                          <div ></div>
                          <div ></div>
                          <div ></div>
                      </div>
                  </div>
                  <div id="resultado"></div>
                  <div >
                      <button 
                        type="submit" 
                        
                        >Cotizar Seguro
                    </button>
                  </div>
 
                </form> 
      </div> <!--#contenido-->
</div>

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