How to add an image to a random variable in JavaScript?

Question

So, I'm starting with JavaScript and got an assignment with a randomizer-ish and goes like this:

There are two usernames reserved, user1 and user2, whenever they put their name on the prompt(), they get a message that they won a car(the car is random).

I made it to the part where the user gets the message, but the problem is, I have to show an image of the car and the message, and I don't know how to do that.

Any advice on how to solve that?

var username = prompt("Hello, who are you?");
var cars = [
  "car1",
  "car2",
  "car3"
];

if (username === "user1") {
  var randomCar = Math.floor(Math.random() * cars.length);
  var car = cars[randomCar];
  document.write("<h1>Congratulations " + username + " you won a " + car + "!</h1>");
} else {
  if (username === "user2") {
    var randomCar = Math.floor(Math.random() * cars.length);
    var car = cars[randomCar];
    document.write("<h1>Congratulations " + username + " you won a " + car + "!</h1>");
  } else {
    document.write("<h1>Sorry " + username + " you didnt won this time." + "</h1>");
  }
}

If someone is teaching you to use `document.write()` or to concatenate arbitrary text into HTML like you're doing, you should honestly probably drop this class and find something else. Both are bad practices that will lead you to unstable, unreliable, and insecure applications. — Brad, Nov 12 '19 at 04:30

score 0 · Answer 1 · answered Nov 12 '19 at 04:37

The easiest thing to do in your case is to update some existing HTML. Put something like this in the page:

<h1>
  Congratulations <span data-content="name"></span>,
  you won a <span data-content="car"></span>!
</h1>

Now, you can use the selector [data-content="name"] or [data-content="car"] to find the appropriate elements. From there, you can use their innerText property.

document.querySelector('[data-content="name"]').innerText = username;
document.querySelector('[data-content="car"]').innerText = car;

For the image, what I would do is change your cars array so that it's both the name of the car and an image URL.

const cars = [
  {name: 'Kia Minivan', image: 'kia.jpg'}
  {name: 'Bugatti Veyron', image: 'bugatti.jpg'}
  {name: 'Chevy Bolt', image: 'bolt.jpg'}
];

Now, you can use car.name for the innerText. Then, to set the image URL....

document.querySelector('img.car').src = car.image;

As this gets more complicated, you might want to check out a JavaScript-based template engine.

Thank you, now I know why is a bad practice, thank you so much. — Robert CG, Nov 12 '19 at 04:50

BadPiggie · Accepted Answer · 2019-11-12T04:43:03.847

You need to change cars array to Array of Object, Then store car name and image. Then you can populate the message....

Note

Do not use document.write to populate your message.

Do not use unwanted If conditions.

var username = prompt("Hello, who are you?");
var cars = [
  {
    "name":"car1",
    "image":"https://specials-images.forbesimg.com/imageserve/5d35eacaf1176b0008974b54/960x0.jpg?cropX1=790&cropX2=5350&cropY1=784&cropY2=3349"
  },
  {
    "name":"car2",
    "image":"https://auto.ndtvimg.com/car-images/big/ferrari/portofino/ferrari-portofino.jpg?v=27"
  },
  {
    "name":"car3",
    "image":"https://car-images.bauersecure.com/pagefiles/84674/2019bmwi8-roadster-01.jpg"
  }
];

if (username === "user1" || username === "user2") {
  var randomCar = Math.floor(Math.random() * cars.length);
  var car = cars[randomCar]['name'];
  var image = cars[randomCar]['image'];
  document.write("<h1>Congratulations " + username + " you won a " + car + "!</h1><img src='"+image+"' width='200'>");
} else {
    document.write("<h1>Sorry " + username + " you didnt won this time." + "</h1>");
}

Thank you so much for your advice, I really appreciate the help. — Robert CG, Nov 12 '19 at 04:50

How to add an image to a random variable in JavaScript?

2 Answers2