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 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>
>Solution :
Just change the selectedType to type
UI.prototype.showResult = (insurance) => {
const {brand, year, type} = insurance;
console.log(brand);
console.log(type);
};
Read more about destructing assignment..
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment