CODEWITHSUNDEEP
javascripthtmlcss
Sara Ree
Sara Ree

Reputation: 3543

Load two images to html using javascript

I want to load two images to my HTML page and position them side by side (Horizontally) using Javascript. But at the first step, a confusion happens.

Here I have a code which results in something like this :

enter image description here

How can I fix that? Where is my fault?

Javascript:

var img = document.createElement("IMG");
  img.setAttribute("src", "1.jpg");
  img.setAttribute("width", "300");
  img.setAttribute("height", "300");
  img.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(img);

  var img2 = document.createElement("IMG2");
  img2.setAttribute("src", "2.jpg");
  img2.setAttribute("width", "300");
  img2.setAttribute("height", "300");
  img2.setAttribute("alt", "The Pulpit Rock2");
  document.body.appendChild(img2);

HTML:

<div id="IMG">
<div id="IMG2">

<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css">

CSS:

img {

   border: 1px solid #d6d6d6;
   padding: 6px;
   border-radius: 50%;
   box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0        rgba(227, 228, 232);  

}


img2 {

   border: 1px solid #d6d6d6;
   padding: 6px;
   border-radius: 50%;
   box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0        rgba(227, 228, 232);  

}

Upvotes: 0

Views: 376

Answers (3)

M.suleman Khan
M.suleman Khan

Reputation: 596

Just change the img2 to img

document.createElement("IMG2")

To

document.createElement("img")

Because .createElement is creating an img2 tag which is not a valid HTML tag.

Upvotes: 2

FZs
FZs

Reputation: 18609

You created an element with tag name img2. This can't be interpreted by the browser.

So use:

var img = document.createElement("IMG");
  img.setAttribute("src", "1.jpg");
  img.setAttribute("width", "300");
  img.setAttribute("height", "300");
  img.setAttribute("alt", "The Pulpit Rock");
  document.body.appendChild(img);

  var img2 = document.createElement("IMG");
  img2.setAttribute("src", "2.jpg");
  img2.setAttribute("width", "300");
  img2.setAttribute("height", "300");
  img2.setAttribute("alt", "The Pulpit Rock2");
  document.body.appendChild(img2);

And simply ignore the css img2{...}

Upvotes: 3

Obsidian Age
Obsidian Age

Reputation: 42354

For your img2, you have var img2 = document.createElement("IMG2");, which would create an <img2> element. This needs to be changed to var img2 = document.createElement("IMG"); to create an <img> element.

This can be seen in the following:

var img = document.createElement("IMG");
img.setAttribute("src", "http://placehold.it/100");
img.setAttribute("width", "300");
img.setAttribute("height", "300");
img.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(img);

var img2 = document.createElement("IMG");
img2.setAttribute("src", "http://placehold.it/100");
img2.setAttribute("width", "300");
img2.setAttribute("height", "300");
img2.setAttribute("alt", "The Pulpit Rock2");
document.body.appendChild(img2);
img {
  border: 1px solid #d6d6d6;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0 rgba(227, 228, 232);
}

img2 {
  border: 1px solid #d6d6d6;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 4px 8px 0 rgba(227, 228, 232), 0 6px 20px 0 rgba(227, 228, 232);
}

Upvotes: 3

Related Questions