I have a class named 'Car'. What I want is that when the user selects 'Maruti' from the select option all data of the swift car will print in the table.When I choose Maruti it does not print anything and there is no console error also.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="sel" onchange="selected();">
<option>---choose--</option>
<option>Maruti</option>
<option>Tata</option>
</select>
<table></table>
<script>
let Car= class {
constructor(name,power,torque,weight){
this.name=name;
this.power=power;
this.torque=torque;
this.weight=weight;
}
}
class Maruti extends Car{
constructor(name,power,torque,weight){
super(name,power,torque,weight);
}
}
class Tata extends Car{
constructor(name,power,torque,weight){
super(name,power,torque,weight);
}
}
var swift = new Maruti('swift',103,100,870);
var safari = new Tata('safari',105,138,1070);
function selected(){
var sel = document.getElementById('sel').value;
for(const key in Car){
if(sel[1]=='Maruti'){
document.querySelector('table').innerHTML+= '<tr>' + '<td>' + key +'</td>'+ '<td>'+ swift[key]+'</td>' + '</tr>';
}else{
document.querySelector('table').innerHTML+= '<tr>' + '<td>' + key +'</td>'+ '<td>'+ safari[key]+'</td>' + '</tr>';
}
}
}
</script>
</body>
</html>