Adding a image to an element

Question

I'm making a element that is randomly appearing on the screen using javascript. What would I do in order to add an image using javascript to the randomly generated element?

function addEnemy() {
  var interval = 0.1;
  if (iterations > 1500) {
    interval = 5;
  } else if (iterations > 1000) {
    interval = 3;
  } else if (iterations > 500) {
    interval = 1;
  }

  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);
    var enemiesDiv = document.getElementById("enemiesDiv");
    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";
    enemiesDiv.appendChild(element);
    enemies[enemies.length] = enemy;
    element.enemy.innerHTML
  }
}

swagrov · Accepted Answer · 2019-02-28 21:31:00Z

1

You can create a new img element, give it the source to your image, then append that img element to your element you created. (I would suggest using a more descriptive variable name than just "element")

The relevant code could look like this:

var myImage = document.createElement('img');
myImage.src = 'my_image.jpg';
element.appendChild(myImage);

answered Feb 28, 2019 at 21:31

swagrov

1,5103 gold badges26 silver badges45 bronze badges

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

Comments

amedina · Accepted Answer · 2019-02-28 21:31:14Z

A little bit too broad, but I think you could consider using the background property of your created div. Something like this:

function addEnemy() {
  var interval = 0.1;
  if (iterations > 1500) {
    interval = 5;
  } else if (iterations > 1000) {
    interval = 3;
  } else if (iterations > 500) {
    interval = 1;
  }

  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);
    var enemiesDiv = document.getElementById("enemiesDiv");
    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";

    // Here
    element.style.backgroundImage = "url('img_enemy.png')";

    enemiesDiv.appendChild(element);
    enemies[enemies.length] = enemy;
    element.enemy.innerHTML
  }
}

Collectives™ on Stack Overflow

Adding a image to an element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related