Modify JQuery script to allow for multiple on a page

JavaScript
1

JSFiddle: http://jsfiddle.net/C8VmC/

The first row of my fiddle works, however I need to have it modified so that it works for multiple on a page with the id’s being Pixels_X and Percentage_X.

Thank you for any help,

Best Regards,
Tim

2

It sounds like you want to use a for loop:


var pixel, percentage, i;
for (i = 0; i < 100; i += 1) {
    pixel = document.getElementById('Pixels_' + i);
    percentage = document.getElementById('Percentage_' + i);
    ...
}

A better solution though is to not use sequentially named unique identifiers, and to use a class name instead.


<input type="number" name="pixels[]" class="pixels"> 
...
<input type="number" name="percentage[]" class="percentage">



function addPixelPercentageHandler(pixels, percentage) {
    // add event to pixels and percentage field
}

var pixels = document.querySelectorAll('.pixels'),
    percentage = document.querySelectorAll('.percentage'),
    i;
for (i = 0; i < pixels.length; i += 1) {
    addPixelPercentageHandler(pixels[i], percentage[i]);
}