focus function doesnt trigger twice

Viewed 35
    const Arrays = new Array();
    Arrays [0] = obst;
    Arrays [1] = Obst;
    Arrays [2] = gemüse;
    Arrays [3] = Gemüse;
    
 var select_select_array = document.createElement('select');
        select_select_array.id = 'Select_array_delete';
        select_select_array.autofocus = true;
        console.log(select_select_array.autofocus);
        


        fieldset_select_array.appendChild(select_select_array);
        select_select_array.addEventListener('change', array_selected);
        select_select_array.addEventListener('change', set_array_name);
        select_select_array.addEventListener('focus', array_selected);
        select_select_array.addEventListener('focus', set_array_name);

 function set_array_name()
        {
            list_choice = select_select_array.value;
            for (let i = 0; i <= Arrays.length; i = i + 2)
            {
                if (list_choice === Arrays[i])
                {
                    select_item_to_delete.innerHTML = '';
                    array_name = list_choice.charAt(0).toUpperCase() + list_choice.slice(1);
                    selected_array_delete = eval(array_name);
                    for (let i2 = 0; i2 < selected_array_delete.length; i2++)
                    {
                        item_to_delete = document.createElement('option');
                        item_to_delete.innerHTML = selected_array_delete[i2];
                        item_to_delete.value = selected_array_delete[i2];
                        item_to_delete.id = 'Opt_' + selected_array_delete[i2];
                        select_item_to_delete.appendChild(item_to_delete);
                    }
                }
            }
        }

https://learning-by-doing.netlify.app/learning%20by%20doing%20javascript/arrays.html

so i got the following problem , i am new to Javascript , so please excuse my bad coding,

following szenario: i click a button ("Löschen") , an interface gets generated , where the first select is autofocused , the autofocus triggers an event , which tells js which array is selected , so that js then can decide on the second select element , which options have to be shown , all good so far

you click the main menu button (the one on the bottom right if you open the site supplied at the start of this question. then you click 'Löschen' again , the whole site should now be rebuild by js since i first emptyed the inner HTML of the site via = ''

so in my theory , all elements get created again, with same attributes and so on , yet when you click "Löschen" the second time the second select Element , wont automatically show any options , unless you manually focus the first select element.

how does this happen? any solutions?

Thanks a lot :)

1 Answers

Autofocus focuses the element when the page loads. You can focus your element with javascript whenever you need with focus method like this: elem.focus();

So, in your case you need to focus your element manually after it is rendered

Related