Skip to content
Advertisement

I have created image tag in JavaScript, but it is not displaying image on web page

I am calling this function on add button from my PHTML. On click of add button I want to show image of selected fruit in <div>.

   function moveoutid()
   {
var sda = document.getElementById('availableFruits');
var len = sda.length;
var sda1 = document.getElementById('orderFruits');

for(var j=0; j<len; j++)
{
    if(sda[j].selected)
    {
        alert(baseUrl+"/img/"+sda.options[j].value+".jpg");
        var img1=document.createElement('img').src=baseUrl+"/img/"+sda.options[j].value+".jpg";

        var di=document.getElementById('d');
        di.appendChild(img1);


        var tmp = sda.options[j].text;
        var tmp1 = sda.options[j].value; 
        sda.remove(j);
        j--;
        var y=document.createElement('option');
        y.text=tmp1;
        try
        {
            sda1.add(y,null);
        }
        catch(ex)
        {
            sda1.add(y);
        }
    }
}

   }

In this code I have created <img> tag and passing image path to src, to show selected image on web page. It is correctly taking path of images but it is not appending <img> tag and not displaying image on web page.

Advertisement

Answer

Your problem is, most likely, in this line:

var img1=document.createElement('img').src=baseUrl+"/img/"+sda.options[j].value+".jpg";

This creates an element, assigns the src property to it and then assigns the value of this src property to variable img1. Instead, you should do this in two lines:

var img1 = document.createElement('img');
img1.src = baseUrl+"/img/"+sda.options[j].value+".jpg";
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement