I'm looking for a method to trigger onChange() specifically on Internet Explorer using only JavaScript, HTML, and CSS without relying on jQuery

Question

I'm looking for a method to trigger onChange() specifically on Internet Explorer using only JavaScript, HTML, and CSS without relying on jQuery

Looking for a way to utilize onChange() only on Internet Explorer using Javascript, HTML, CSS (No Jquery). My current code successfully sends the input to my function upon onChange(), but it seems to work smoothly on Chrome and not on IE. Is there a method to make it function similar to Chrome's behavior or is there an alternative approach that would trigger the function after selecting an option? If not, I might have to modify all 400 lines of my script code :(

<label>Choose a browser from this list:
        <input id = "input1" list="table1" name="myBrowser" 
        style="width: 500px;"  onchange="castvote('input1','table1')" onclick="test('input1')"/> 
</label>
    <datalist id="table1">
        <option value="Firefox">      
        <option value="more options">

javascript html css

Answer 1

Answer №1

Here is a straightforward illustration of how to add event listeners using vanilla JavaScript. The code has been enhanced to target elements with a specific class, such as castVote, and dynamically add the listener in a loop to each element.

(function addCastVoteListeners() {
  const elements = Array.prototype.slice.call(document.querySelectorAll('.castVote'));
  elements.forEach(addCastVoteListener);
})();


function addCastVoteListener(element) {
  element.addEventListener('change', castVote);
}

function castVote() {
  console.log('casting vote');
}

<label>Choose a browser from this list:
        <input id = "input1" list="table1" name="myBrowser" class="castVote"
        style="width: 500px;"/> 
</label>
<datalist id="table1">
    <option value="Firefox">      
    <option value="more options">
</datalist>

Answer 2

Here is a straightforward illustration of how to add event listeners using vanilla JavaScript. The code has been enhanced to target elements with a specific class, such as castVote, and dynamically add the listener in a loop to each element.

(function addCastVoteListeners() {
  const elements = Array.prototype.slice.call(document.querySelectorAll('.castVote'));
  elements.forEach(addCastVoteListener);
})();


function addCastVoteListener(element) {
  element.addEventListener('change', castVote);
}

function castVote() {
  console.log('casting vote');
}

<label>Choose a browser from this list:
        <input id = "input1" list="table1" name="myBrowser" class="castVote"
        style="width: 500px;"/> 
</label>
<datalist id="table1">
    <option value="Firefox">      
    <option value="more options">
</datalist>

I'm looking for a method to trigger onChange() specifically on Internet Explorer using only JavaScript, HTML, and CSS without relying on jQuery

Answer №1

Similar questions

Condition has been fulfilled for both ngShow and ngHide

Navigate through the options on the left menu by sliding your

CSS: Eliminate unnecessary space at the top by implementing a margin and padding reset

Elements appearing distorted in Firefox and Internet Explorer

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

The issue with AngularJS multiple $http requests failing to fetch accurate data

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

Tips for ensuring Marketo forms are responsive when integrated into a WordPress website

React is struggling to dynamically update text content using button click events

The React getTime() method does not properly update the state

Disable setTimeout in Node.js triggered by an event

Looking for a list of events in Express.js?

What is the process for implementing a title search filter in Vue.js?

Installing Eclipse for PHP and JavaScript on your computer is a simple process. Here

Guide to altering the color of the row that is clicked in a table using css and jquery

deactivate a vessel, causing all of its contents to be rendered inactive

Why is the useHistory hook in React failing to function properly?

Frontend update: Changing the display format for dates

What is the best way to send an HTML report through email with embedded images as an attachment?

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current