My alert does not work when I click on select option-CodePudding

<!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'
        },
        ]


        //OPTIONS
        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 do not get alert??")
            }
        }

    </script>
</body>

</html>

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. I have made a select and added options by script. The select is appended with options. the options are appended with the auto model name. The console writes out the select options so I do not know why unclickable. Why?

CodePudding user response：

You want to add a "change" event listener to the select element. Also, you can reference the tag directly by using x which you used to create the element instead of continuing to select it.

Replace this:

opts = document.getElementsByTagName("option")
for (i = 0; i < opts.length; i  ) {
   console.log(opts[i])
   opts[i].addEventListener("click", function(){
       alert("Why do not get alert??")
   })
}

To this:

x.addEventListener("change", function(event) {
  alert(event.target.value)
})

CodePudding user response：

You need to use change event on your select element (x variable)

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);
}

x.addEventListener('change', (e)=> {
   alert("Why do not get alert??")
   // to show ur selected value use this
   // alert(e.target.value)
})

<!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>

</body>

</html>

CodePudding user response：

The problem is that the event must be of "change" type and not of "click" type, then the event must occur on the "select" tag and not on the "option" tag.

On the other hand, you can use ES6 which is more elegant in terms of code, and you can also structure your code in this way, a little cleaner, and more maintainable in the long term.

const 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'
            },
];

const select = document.createElement("select");
select.id = "mySelect";

autos.forEach(auto => {
    const option = document.createElement("option");
    option.value = auto.model;
    option.innerText = auto.model;
    select.append(option);
});

document.body.append(select);

select.addEventListener("change", () => alert(select.value));

<!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>

    
</body>

</html>

Good luck to you dude !

CodePudding user response：

"Neither the onSelect() nor onClick() events are supported by the <option> tag."

Try this instead: i.e.

//OPTIONS
var x = document.createElement("SELECT");
x.setAttribute("id", "mySelect");
x.setAttribute("onchange", "alert(value)");
document.body.appendChild(x);

Remove this :

 opts = document.getElementsByTagName("option")
        for (i = 0; i < opts.length; i  ) {
            console.log(opts[i])
            opts[i].onclick = function () {
                alert("Why do not get alert??")
            }
        }