Simple javascript onClick for table data

Question

I have a table of images in rows of 10 and I'm trying show the id of each image when I click on it. I've tried many, many different ways of this (code below) but no joy. Hopefully someone can set me straight. No point in any jquery or other clever stuff though - I don't understand it yet. Just some simple pointers would help a lot.

document.writeln('<table border = 1 >');

for (var j = 0; j < myArray.length; j++){
    if (j % 10 == 0 && j !== 0){
        document.writeln('</tr><tr>');
    }

    document.writeln('<td ><img id = "' + myArray[j].id + '" src="' + myArray[j].src + '" onclick = selectImage() /></td>');
}

document.writeln('</tr></table>');

function selectImage() {
    alert(document.getElementById(id));
}

Probably. I tried that (and countless other ways) too but equally unsuccessful. — shep
– shep, Commented Oct 6, 2016 at 3:51

Fadhly Permata · Accepted Answer · 2016-10-06 03:42:00Z

1

You need add a parameter to selectImage method, so we can send some information to those method. As you can see on my snippet:

var myArray = [
  {
    id: "id01", 
    src: "src01.jpg"
  },
  {
    id: "id02", 
    src: "src02.jpg"
  },
  {
    id: "id03", 
    src: "src03.jpg"
  },
];

document.writeln('<table border = 1 >');

for (var j = 0; j < myArray.length; j++){
    if (j % 10 == 0 && j !== 0){
        document.writeln('</tr><tr>');
    }

    document.writeln('<td ><img id = "' + myArray[j].id + '" src="' + myArray[j].src + '" onclick = selectImage(this) /></td>');
}

document.writeln('</tr></table>');

function selectImage(a) {
    console.log(a.getAttribute('src'));
    console.log(a.getAttribute('id'));
}

answered Oct 6, 2016 at 3:42

Fadhly Permata

1,68613 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

shep Over a year ago

Thanks for that also. I tried it and now get a ReferenceError: a is not defined console.log(a.getAttribute('src'));

Fadhly Permata Over a year ago

have you passing the argument at onclick event using this? like : onclick = selectImage(this)

shep Over a year ago

Tried again with the (a) in the function arg and now I get no error but also nothing else. Anyway the assignment requires nothing outside the material covered to date so I can't use (this) and I can't use (console.log). Must be a simple answer but I'm just not seeing it.

Fadhly Permata Over a year ago

I am feel confuse with your comment above. I think, I've give you simple answer.. Have you try to run my snippet using RUN CODE SNIPPET button? So, What do you mean about assignment requires nothing outside the material covered to date so I can't use (this) and I can't use (console.log). Must be a simple answer but I'm just not seeing it.

shep Over a year ago

Yes I tried your snippet and it works very well. I have 100's of images so I can't manually write them all in so I generate the table from the array. We're only just starting the course and I haven't come across the console.log yet and we're specifically requested not to use anything beyond what has been covered in the course. I used the (this) from another answer and it worked but I'm pretty sure I'll get marked down for it because we haven't covered that yet either.

virtualsante · Accepted Answer · 2016-10-06 03:43:16Z

0

when making a call to selectImage, try passing the current image element by using the 'this' keyword i.e selectImage(this)

and then in the script, you can receive the passed object and retrieve the id attribute from there.

function selectImage(obj)
{
alert(obj.id);
}

answered Oct 6, 2016 at 3:43

virtualsante

2031 silver badge10 bronze badges

6 Comments

shep Over a year ago

Thanks, I tried that and it almost worked. I now get a [object HTMLImageElement] in the alert window. Must be close. When you say (obj) and (obj.id) I just used x. Forgive my ignorance but is that the problem maybe - what is obj?

virtualsante Over a year ago

No worries! 'obj' is the just a reference of the object passed into the function. You can name it whatever you want. In this case, 'obj' contains a reference to the image element. Once we receive the image element, I am trying to pull the id attribute. Alternatively, you can directly pass the id into the function by modifying the function call to selectImage(this.id) in which case, you simply need to alert(obj) like this: function selectImage(obj) { alert(obj); }

shep Over a year ago

You're a legend! I used selectCard(this) and then function selectCard(x) { alert(x.id); }

shep Over a year ago

More help! I think that's just referencing the table cell not the image id. ie if I could shuffle them around it might still give the same output even though the image is in another cell. Not sure how to tell just yet? Don't s'pose you have any thoughts? Cheers.

virtualsante Over a year ago

are you sure you are calling the function from the image element? From what you are saying, I think you may have added the function call on the table element?

|

Collectives™ on Stack Overflow

Simple javascript onClick for table data

2 Answers 2

5 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related