I loop through a JSON to put the model names into the select option.
That is right!
But after clicking on the select option, the alert does not work.
Why?
What I have tried:
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
autos = [{
id: 1,
year: 2011,
model: 'FORD FIESTA CONNECTED 1.1L PFI3',
color: 'MAGNETIC',
ccm: 1100,
fuel: 'benzin',
performance: '55 kW / 74 LE',
gearbox: '5 FOK. MANUÁLIS'
},
{
id: 2,
year: 2006,
model: 'FORD ECOSPORT TITANIUM 1.0L 125 M6',
color: 'DESERT ISLAND BLUE',
ccm: 990,
fuel: 'benzin',
performance: '92 kW / 125 LE',
gearbox: '5 FOK. MANUÁLIS'
},
{
id: 3,
year: 2021,
model: 'FORD Focus Connected 5 ajtós 1.0 ',
color: 'Kék',
ccm: 990,
fuel: 'benzin',
performance: '91 kW / 123 LE',
gearbox: '6 FOK. MANUÁLIS'
},
{
id: 4,
year: 2021,
model: 'FORD PUMA',
color: 'Kék',
ccm: 1000,
fuel: 'benzin',
performance: '91 kW / 123 LE',
gearbox: '6 FOK. MANUÁLIS'
},
{
id: 5,
year: 2021,
model: 'FORD KUGA TITANIUM 1.5L ECOBOOST 150 M6',
color: 'SOLAR SILVER',
ccm: 1497,
fuel: 'benzin',
performance: '110 kW / 149 LE',
gearbox: '6 FOK. MANUÁLIS'
},
{
id: 6,
year: 2021,
model: 'FORD MONDEO Titanium 2.0 FHEV 187 LE',
color: 'Metal Blue',
ccm: 1999,
fuel: 'Hybrid',
performance: '110 kW / 147 LE',
gearbox: 'CVT AUTOMATA'
},
{
id: 7,
year: 2021,
model: 'FORD S-MAX TITANIUM 2.0L TDCI 150LE M6 FWD',
color: 'MAGNETIC',
ccm: 1997,
fuel: 'Dízel',
performance: '110 kW / 149 LE',
gearbox: '6 FOK. MANUÁLIS'
},
{
id: 8,
year: 2021,
model: 'FORD GALAXY TITANIUM 2.0TDCI 150LE M6 FWD',
color: 'MAGNETIC',
ccm: 1997,
fuel: 'Dízel',
performance: '110 kW / 149 LE',
gearbox: '6 FOK. MANUÁLIS'
},
]
var x = document.createElement("SELECT");
x.setAttribute("id", "mySelect");
document.body.appendChild(x);
for (i = 0; i < autos.length; i++) {
var z = document.createElement("option");
z.setAttribute("value", autos[i].model);
var t = document.createTextNode(autos[i].model);
z.appendChild(t);
document.getElementById("mySelect").appendChild(z);
}
opts = document.getElementsByTagName("option")
for (i = 0; i < opts.length; i++) {
console.log(opts[i])
opts[i].onclick = function () {
alert("Why does not get alert??")
}
}
</script>
</body>
</html>