I'm trying to execute a function as soon as an option is selected. My code works flawlessly in Firefox but there's no response or error in Google Chrome. I have tried different solutions found on StackOverflow but nothing helped. The solutions I tried include adding javascript as an external file. I tried Using window.addEventListener but nothing is working in chrome.

EDITED(THE SOLUTIONS I TRIED):

solution 1

solution 2

solution 3

HTML:

<div class="col-12">
<label for="username" class="form-label">Select Plan</label>
<select id="selections" class="form-select" aria-label="Default select example">
    <option class="dropdown_option" id="1" value="plan1">plan1</option>
    <option class="dropdown_option" id="2" value="plan2">plan2</option>
    <option class="dropdown_option" id="3" value="plan3">plan3</option>
    <option class="dropdown_option" id="4" value="plan4">plan4</option>
</select>
</div>

JS(EDITED):

h = document.getElementsByClassName('dropdown_option');

for (var i = 0; i < h.length; i++) {
    h[i].addEventListener('click', function() {
        console.log(this.innerHTML);
        retrieveplans(this.innerHTML);
    })
}