Modify function to use html class instead of id

Question

I have a resize image function which takes as input the ID of an file input element and .onchange it takes the image in the form and outputs a resized canvas of the image. Now I have changed the form structure from a static form where I know the IDs to a dynamically generated form where I only know the class of the input.

<input type="file" class"image" id="some database genererated id such as 857432">

How to do I modify the function to notice when a file input element of class="image" is .onchange and then perform the resize function on that particular element?

function resizeImage(inputfile, outputcontainer, outputname) {
    document.getElementById(inputfile).onchange = function(e) {
    var file = e.target.files[0]
    var image = new Image(file);
    etc.....

    };
}

[Related](http://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javascript) — 1321941, Sep 24 '13 at 12:32
did you try to use jquery? It would make it a lot easier becaues it provides a selector for class names $(".classname") — MichaC, Sep 24 '13 at 12:32
You can try something like `var element = document.getElementsByClassName()[0]; element.onchange = function(e) { ... }` Hope this help — simpletron, Sep 24 '13 at 12:32
In pure javascript, you can use _document.getElementsByClassName("inputfileclassname")[0]_ — Gurminder Singh, Sep 24 '13 at 12:40

Sid M · Answer 1 · 2013-09-24T13:12:50.197

1

Try this

function resizeImage(inputfile, outputcontainer, outputname) {
    $(".image").change  = function(e) {
    var file = e.target.files[0]
    var image = new Image(file);
    etc.....

    };
}

edited Sep 24 '13 at 13:12

answered Sep 24 '13 at 12:38

Sid M

4,354
4
30
50

Jitendra Pancholi · Accepted Answer · 2013-09-24T12:40:28.097

0

use like below

function resizeImage(inputfileClass, outputcontainer, outputname) {
    $('.' + inputfileClass).change = function(e) {
    var file = e.target.files[0]
    var image = new Image(file);
    etc.....

    };
}

edited Sep 24 '13 at 12:40

answered Sep 24 '13 at 12:33

Jitendra Pancholi

7,897
12
51
84

2

`$('.' + inputfileClass).onchange = function(e) {` should be `$('.' + inputfileClass).change(function(e) {......});` – Arun P Johny Sep 24 '13 at 12:35
Thanks Jitendra and Arun, I was obviously overthinking this way too much :) – Jonas Bolin Sep 24 '13 at 12:59

Modify function to use html class instead of id

2 Answers2