Implementing images in JavaScript

Question

I'm fiddling around with JS and made a random word generator (foodinator) for practicing purposes. How can I implement images with this? Dish 1 should always show with Image 1, Dish 2 with Image 2 and so on.

HTML (index.html)

<div class="wrapper">
    <div class="title">
        <h1><u>What are you going to eat?</u></h1>
    </div>
    <div id="foodDisplay">
    </div>
    <div class="button">
        <button onclick="newFood()">
            New Dish!
        </button>
    </div>
</div>

JavaScript (scripts.js)

var foods = [
'Dish 1',
'Dish 2',
'Dish 3',
'Dish 4',
'Dish 5',
'Dish 6',
'Dish 7',
'Dish 8',
'Dish 9',
'Dish 10'
];

function newFood() {
var randomNumber = Math.floor(Math.random() * (foods.length));
document.getElementById('foodDisplay').innerHTML = foods[randomNumber];
}

When clicking the button it picks a random dish from the list, that works. I expect it to show up with the correct image. I know it is very basic knowledge, I hope some one can direct me in the right direction. Thanks in advance.

What images are you talking about? There are only strings in your code, no images. — Bergi
– Bergi, Commented Jul 21, 2019 at 15:05
Yes indeed sorry, let me clarify. I only need the code which puts the images with the correct strings. I am adding the actual images later. — Sjf
– Sjf, Commented Jul 21, 2019 at 15:09

Joel Garcia Nuño · Accepted Answer · 2019-07-21 16:25:05Z

1

Tip: Make an object which will have the both values like a ( key & value ) structure.

var foods = [
{name: 'Dish 1', image: 'image_dish_1.jpg'},
.
.
.
];

Need a bit modify in our function: ( ES6 )

function newFood() {
var randomNumber = Math.floor(Math.random() * (foods.length));
var food = foods[randomNumber];
document.getElementById('foodDisplay').innerHTML = `
      <img alt="${food.name}" src="${food.image}" />
    `;
}

Need a bit modify in our function: ( ES5 )

function newFood() {
  var randomNumber = Math.floor(Math.random() * (foods.length));
  var food = foods[randomNumber];
  var imgElement = document.createElement('img');
  imgElement.src = food.image;
  imgElement.alt = food.name;
  document.getElementById('foodDisplay').innerHTML = imgElement.outerHTML;
}

edited Jul 21, 2019 at 16:25

answered Jul 21, 2019 at 15:10

Joel Garcia Nuño

1,04111 silver badges20 bronze badges

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

2 Comments

Bergi Over a year ago

Your last code snippet doesn't work, imgElement.innerHTML is the empty string. I guess you meant to empty the display div and then document.getElementById('foodDisplay').appendChild(imgElement);?

Joel Garcia Nuño Over a year ago

Try outerHTML or something over images doesn't work properly

Pingolin · Accepted Answer · 2019-07-22 06:03:41Z

I used a placeholder for the path of the image, but you can change it to your case. It should give you an idea of how to insert an image in your div.

var foods = [
  'Dish 1',
  'Dish 2',
  'Dish 3',
  'Dish 4',
  'Dish 5',
  'Dish 6',
  'Dish 7',
  'Dish 8',
  'Dish 9',
  'Dish 10'
];

function newFood() {
  var randomNumber = Math.floor(Math.random() * (foods.length));
  var img = '<img src="//lorempixel.com/400/200/food/' + foods[randomNumber] + '/" alt="' + foods[randomNumber] + '">';
  document.getElementById('foodDisplay').innerHTML = img;
}

<div class="wrapper">
  <div class="title">
    <h1><u>What are you going to eat?</u></h1>
  </div>
  <div id="foodDisplay"></div>
  <div class="button">
    <button onclick="newFood()">
      New Dish!
    </button>
  </div>
</div>

Collectives™ on Stack Overflow

Implementing images in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related