Issue
I would like to modify the price based on the selected Model.
const options = {
'Toyota': {
cars: ['Camry', 'Corolla', 'Yaris Sedan']
},
'Nissan': {
cars: ['bluebird', 'Murano', 'Tiida']
},
'Volkswagen': {
cars: ['MarkX', 'Avensis']
},
}
function updateCarByBrand() {
carselect.innerHTML = "";
options[brandselect.value].cars.forEach(e => carselect.innerHTML += `<option value=${e}">${e}</option>`)
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();
if (cars = 'Camry') {
document.getElementById("washing").innerHTML = 20;
document.getElementById("polishing").innerHTML = 20;
} else {
document.getElementById("washing").innerHTML = 0;
document.getElementById("polishing").innerHTML = 0;
}
if (cars = 'Corolla') {
document.getElementById("washing").innerHTML = 30;
document.getElementById("polishing").innerHTML = 30;
} else {
document.getElementById("washing").innerHTML = 0;
document.getElementById("polishing").innerHTML = 0;
}
<p>Factory <br>
<select id="brandselect">
<option value="Toyota"> Toyota</option>
<option value="Nissan"> Nissan</option>
<option value="Volkswagen"> Volkswagen</option>
</select>
</p>
<p>Model <br>
<select id="carselect">
</select>
</p>
<table>
<tr>
<th>Choice </th>
<th>Service </th>
<th>Price $ </th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Washing</td>
<td>
<p id="washing"></p>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Polishing</td>
<td>
<p id="polishing"></p>
</td>
</tr>
</table>
Solution
You need another event listener and a price object
You could embed the price in the car object but here you can have a default for models you do not want to have special prices for
const options = {
'Toyota': {
cars: ['Camry', 'Corolla', 'Yaris Sedan']
},
'Nissan': {
cars: ['bluebird', 'Murano', 'Tiida']
},
'Volkswagen': {
cars: ['MarkX', 'Avensis']
},
}
const prices = {
"Camry": {
"washing": 20,
"polishing": 20
},
"Corolla": {
"washing": 30,
"polishing": 30
},
}
function updateCarByBrand() {
carselect.innerHTML = "";
options[brandselect.value].cars.forEach(car => carselect.innerHTML += `<option value="${car}">${car}</option>`)
}
function updatePriceByModel() {
const cars = carselect.value;
let price = prices[cars] || {
"washing": 0,
"polishing": 0
}; // default
console.log(cars,price)
document.getElementById("washing").innerHTML = price.washing;
document.getElementById("polishing").innerHTML = price.polishing;
}
brandselect.addEventListener('change', updateCarByBrand);
updateCarByBrand();
carselect.addEventListener('change', updatePriceByModel);
updatePriceByModel()
<p>Factory <br>
<select id="brandselect">
<option value="Toyota"> Toyota</option>
<option value="Nissan"> Nissan</option>
<option value="Volkswagen"> Volkswagen</option>
</select>
</p>
<p>Model <br>
<select id="carselect">
</select>
</p>
<table>
<tr>
<th>Choice </th>
<th>Service </th>
<th>Price $ </th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Washing</td>
<td>
<p id="washing"></p>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Polishing</td>
<td>
<p id="polishing"></p>
</td>
</tr>
</table>
Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.