Q:

How to run function on click with parameters

I currently am making a quiz in which specific answers load images, based on the answer one picked. So I grabbed the 'input' tags and now I have them to be manipulated with. However, I have no idea on how to run my function, while putting in the inputs[i] as a parameter.
Considering that each inputs[i] is different, my idea of:
$('input').click(getImages)

Failed. So I do not know where else to go with that.
// run getImages
$(document).ready(function(){
    var inputs = document.getElementsByTagName('input');
    for (var i = 0 ; i < inputs.length ; i++ )
    {
        inputs[i].onclick = getImages(inputs[i]);
    }
})

function getImages(x){
    // variables
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    var images = {
        '1.1' : 'images/aggressive.jpg',
        '1.2' : 'images/compassionate.jpg',
        '1.3' : 'images/timid.jpg',
        '2.1' : 'images/clean.jpg',
        '2.2' : 'images/moderate.jpg',
        '2.3' : '',
    }

    if (x.name === '1')
    {
        p1.src = images[x.value];
    }
    if (x.name === '2')
    {
        p2.src = images[x.value];
    }
}

A solution that I felt would work would be grabbing the inputs by individual ID, but I don't know how many inputs I will have in the end, and I don't want my code to work specifically for that.

A:

You can do this way:
$('input').click(function() {
    getImages(parameters);
});

Or something like:
$('input').click(function() {
    var x = 1;
    // Or to get the params from the current element, use something like this:
    x = $(this).attr("src");
    getImages(x);
});

A:

I think; looking at what you are doing, all you may need is this:
$(document).ready(function(){
    $('input').click(getImages); //Bind the click handler
});

 var images = {
        '1.1' : 'images/aggressive.jpg',
        '1.2' : 'images/compassionate.jpg',
        '1.3' : 'images/timid.jpg',
        '2.1' : 'images/clean.jpg',
        '2.2' : 'images/moderate.jpg',
        '2.3' : '',
    }

function getImages(e){
     var img = 'p' + this.name; //Get the respective image id based on the input's name
     document.getElementById(img).src=images[this.value]; //Grab the image src from the list and set the value.
}

Fiddle
With your statement inputs[i].onclick = getImages(inputs[i]); issue is that you are binding click handler with the result of the function getImages(argument) (Instead of function reference) which returns nothing hence undefined will be set as the click handler for these inputs and image will be set to the respective src of the last respective input(name) due to the loop that you have.

A:

Try the following code:
var p1, p2, images;
// run getImages
$(document).ready(function(){
    setup();
    $('input').click(function(){
        //if you want to pass jquery object uncomment following line
        //getImages($(this));
        //this passes html object 
        getImages(this);
    });
})

/*you don't need to do this every time*/
function setup(){
    // variables
    p1 = document.getElementById('p1');
    p2 = document.getElementById('p2');
    images = {
        '1.1' : 'images/aggressive.jpg',
        '1.2' : 'images/compassionate.jpg',
        '1.3' : 'images/timid.jpg',
        '2.1' : 'images/clean.jpg',
        '2.2' : 'images/moderate.jpg',
        '2.3' : '',
    }
}

function getImages(x){
    if (x.name === '1')
    {
        p1.src = images[x.value];
    }
    if (x.name === '2')
    {
        p2.src = images[x.value];
    }
}

You can try index() function of jQuery.
$("button#test").on("click",function(){
   alert($(this).index());
});

You can check if this will work for you at this fiddle

