onClick issue in innerHTML Javascript

Dear all,

May i know how to call Javascript function via onClick method fromlic innerHTML?

my code snippet:

        var dropdownButton='<select id="arr3" class="clublisting-class" onClick={() => loadDropDownValue("arr3")}></select>';
        var clubCell=row.insertCell(3);
        clubCell.innerHTML=dropdownButton;


const loadDropDownValue = dropListId => {
        alert("Test="+dropListId);
        var select = document.getElementById(dropListId);
        const elmts = ["Club1","Club2"];
        if(!select.hasChildNodes()){
        for (var i = 0; i < elmts.length; i++) {
            var optn = elmts[i];
            var el = document.createElement("option");
            el.textContent = optn;
            el.value = optn;
            select.appendChild(el);
        }
    }
};

Nothing happened after i clicked the Dropdown menu. It is not calling the loadDropDownValue function.

But i can call the function without issue from outside the innerHTML. eg: <select id=“arr3” class=“clublisting-class” onClick={() => loadDropDownValue(“arr3”)}>

Thank you.

Best regards,
Anderson

Welcome to the forums, @suigionanderson

[off-topic]
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the block of code.

I have done it for you this time.
[/off-topic]

Hello,

You should make things easier to test when you post your code: row is not defined, a basic html structure could help.

This said, try this it should work:

var dropdownButton='<select id="arr3" class="clublisting-class" onClick=\'loadDropDownValue("arr3")\'></select>';

Instead of using inline event attributes, more reliable techniques are achieved by using JavaScript to attach the event instead.

// var dropdownButton='<select id="arr3" class="clublisting-class" onClick={() => loadDropDownValue("arr3")}></select>';
var dropdownButton='<select id="arr3" class="clublisting-class"></select>';
...
const selectClickHandler = () => loadDropDownValue("arr3");
document.querySelector("#arr3").addEventListener("click", selectClickHandler);

After removing the onClick attribute from the select, I become aware that there are no options in there, after which, when clicking on and off select element the options load.

Do you want those options to appear before then? The focus event instead of click, results in the select options loading when you first attempt to interact with it.

const selectClickHandler = () => loadDropDownValue("arr3");
// document.querySelector("#arr3").addEventListener("click", selectClickHandler);
document.querySelector("#arr3").addEventListener("focus", selectClickHandler);

Or if you want the options to load even earlier than that, you don’t need to wait and can run the loadDropDownValue code just by itself.

// const selectClickHandler = () => loadDropDownValue("arr3");
// document.querySelector("#arr3").addEventListener("focus", selectClickHandler);
loadDropDownValue("arr3");

The different options are shown in the test code at https://jsfiddle.net/pg18mrcz/

1 Like

Thank you so much. Pardon my first time posting in this forum… i will do better in my next posting. thanks.

1 Like

Thank you so much Sir… this solution works. :slight_smile:

Thanks for your reply. It doesnt work with that code.

Yes it works. Don’t know what you did exactly but here’s a working pen: https://codepen.io/migli/pen/BaJpKNN

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.