Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why addEventListener to 'select' element does not work in JavaScript?
When a user changes the value of an element, the <input>, <select>, and <textarea> elements fire the change event. The change event does not always fire for every change to an element's value, unlike the input event.
Instead, use querySelector() along with addEventListener(). Let’s discuss one by one to understand how they will work.
The addEventListener() Method − The addEventListener() is a method used to register an event handler for the specified event type on the current element. It allows you to specify a function that will be called whenever the specified event occurs on the element. Following is the syntax for addEventListener()
target.addEventListener(event, function, useCapture)
The querySelector() Method − An element interface function that allows us to search the document and return the first element. When an element matches one of the supplied CSS selectors or groups of selectors, the element is located.
However, it returns null if no matching element is discovered. The Document interface is the only one that uses the querySelector () method. Following is the syntax for querySelector().
element = document.querySelector(selectors);
Let’s dive into the following examples to understand more about addEventListener to select elements.
Example
In the following example we are using querySelector along with addEventListener.
<!DOCTYPE html>
<html>
<body>
<label>
Choose:
<select class="Colours" name="Colour">
<option value="">Select One …</option>
<option value="Black">Black</option>
<option value="Pink">Pink</option>
<option value="Violet">Violet</option>
</select>
</label>
<div class="tutorial"></div>
<script>
const selectElement = document.querySelector('.Colours');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.tutorial');
result.textContent = `You like ${event.target.value}`;
});
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of a drop-down list with some values. If the user chooses an option from the list, the event gets triggered and displays the option chosen by the user.
Example
Considering the following example where we are drawing boxes along with querySelector and addEventListener.
<!DOCTYPE html>
<html>
<style>
.box {
width: 5rem;
height: 5rem;
background-color: #3498DB;
display: inline-block;
}
.box.pink {
background-color: pink;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<script>
document.querySelectorAll(".box").forEach(box =>
box.addEventListener("click", () => box.classList.toggle("pink")))
</script>
</body>
</html>
On running the above script, the web-browser displays, the boxes on the webpage with the applied color. When the user clicks on the boxes, an event gets triggered and changes the color of those boxes.
Example
Let’s consider the another example to run querySelector() and addEventListener().
<!DOCTYPE html>
<html>
<body>
<div class="cricket">MSD</div>
<div class="cricket">VIRAT</div>
<div class="cricket">AMLA</div>
<script>
const boxes = document.querySelectorAll('.cricket');
boxes.forEach(box => {
box.addEventListener('click', function handleClick(event) {
console.log('cricket clicked', event);
box.setAttribute('style', 'background-color: lightgreen;');
});
});
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of div names on the web-browser. If the user clicks on the names, the event gets triggered and applies the color to the text.
6K+ Views
