Question

0

31

Views

How to print JavaScript class in table

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>

3 months ago ·

Juan Pablo Isaza

Answer question

Find remote jobs

Loading