I have done my research but i cant find anything useful that are related to my question.
Original JavaScript Code
$(\"#furniture1\")
Just separate selectors with ,
.
$("#furniture1, #furniture2, #furniture3, #color1, #color2, #color3").keyup(function(){
samefunction();
});
Example
$("#furniture1, #furniture2, #furniture3, #color1, #color2, #color3").keyup(function(){
console.log(`Fired from the input ${this.id}`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="furniture1">
<input id="furniture2">
<input id="furniture3">
For dynamic you need a loop. You can just decrease the code written in the loop like
for(var i = 1; i <= 3; i++)
{
$(`#furniture${i}, #color${i}`).keyup(function () {
samefunction();
});
}
Or as @Satpal have mentioned in the comments you can add a common class for all elements and use that class to bind the event handler like.
$(".someClass").keyup(function(){
console.log(`Fired from the input ${this.id}`);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="furniture1" class='someClass'>
<input id="furniture2" class='someClass'>
<input id="furniture3" class='someClass'>
Option 1: Use event delegation. This solution is pure javascript:
document.querySelector('body').addEventListener('keyup', (e) => {
if (e.target.classList.contains('keyup-capturer')) {
somefunction();
}
});
$ctr = document.getElementById('counter');
document.querySelector('body').addEventListener('keyup', (e) => {
if (e.target.classList.contains('keyup-capturer')) {
somefunction();
}
});
function somefunction() {
console.log(`Fired from the input ${this.id}`);
$ctr.innerHTML = parseInt($ctr.innerHTML, 10) + 1;
};
<input id="furniture1" class="keyup-capturer">
<input id="furniture2" class="keyup-capturer">
<input id="furniture3" class="keyup-capturer">
<input id="color1" class="keyup-capturer">
<input id="color2" class="keyup-capturer">
<input id="color3" class="keyup-capturer">
<div>Key Ups: <span id="counter">0</span></div>
Option 2 [*]: If you do need to use jQuery, you can either use event delegation, or use a class
for calling the same function on when keyup is captured in any element on that class:
$('.keyup-capturer').keyup(function() { samefunction(); });
And assign the .keyup-capturer
class to all the #furniture-x
and #color-x
element IDs.
I don't recommend this approach anymore. See the discussion below.
[*] Some observations:
forEach
or map
to attach event handlers. You'll just be adding a lot of event handlers, and eventually, you'll find your page growing slower with more complexity.$('.c1')
, or attribute selectors $('[disabled]')
, etc), keep in mind this fact. Thanks to @t.niese for pointing this out in the comments.try adding a class furniture
on all furnitures, class color
on all colors, and so on... so that you can select them by group:
let furnitures = document.querySelectorAll('.furnitures');
furnitures.forEach((furniture) => {
furniture.addEventListener('keyup', function() {
// your code here
})
})
or you can pass your function directly:
let furnitures = document.querySelectorAll('.furnitures');
furnitures.forEach((furniture) => {
furniture.addEventListener('keyup', samefunction)
})