'[object HTMLImageElement]' displaying instead of image

Question

This is the code I tried to modify and put in a wrapper div. This works perfectly.

display_element.append($('<div>', {
    html: trial.a_path_west,
    id: 'jspsych-single-stim-stimulus-west'
}));

But this isn't working. In particular the div html part displays [object HTMLImageElement] instead of the actual image.

to_add+="<div id='jspsych-single-stim-stimulus-west'>" + trial.a_path_west + "</div>";

Thanks!

Answer 1

There is no html attribute for the div tag.

The html when used in the {} version will invoke the html jquery method on it.

To do it that way you will have to add the html between the opening and closing tags of the div

to_add+="<div id='jspsych-single-stim-stimulus-west'>" +trial.a_path_west+ "</div>";

Answer 2

Ok, I Think I understand what you're trying to do and what your problem is. When you're using "<div id='jspsych-single-stim-stimulus-west'>" + trial.a_path_west + "</div>" you're casting your image object as a string.

Instead use a jquery method such as html that will accept the image object as a parameter and generate the necessary html

if (!trial.west_is_html) {
      to_add+="<img src="+trial.a_path_west+ " id='jspsych-single-stim-stimulus-west'>";
}
else {
     var wrapper = $("<div id='jspsych-single-stim-stimulus-west'></div>");
     wrapper.html(trial.a_path_west);
     to_add+= wrapper.html();
}

See this demo from this answer for a working example and more information