CODEWITHSUNDEEP
javascripthtmlcss
mlawsonca
mlawsonca

Reputation: 109

'[object HTMLImageElement]' displaying instead of image

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!

Upvotes: 0

Views: 2208

Answers (2)

Austin Philp
Austin Philp

Reputation: 94

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

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

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>";

Upvotes: 1

Related Questions