Change output image size from JS

Question

I have made an array with a set of random images which works. I just don't know how I'm supposed to style the image as an image;

  var imageURLs = [
       "./images/404/random1.png"
     , "./images/404/random2.png"
     , "./images/404/random3.png"
     , "./images/404/random4.png"
     , "./images/404/random5.png"
  ];
  function getImageTag() {
    var img = '<img src=\"';
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img += imageURLs[randomIndex];
    img += '\" alt=\"404 Image."/>';
    img.className  = "404image";
    img.width = "10%"
    return img;
  }

  document.write(getImageTag());

I'd assume you'd style it with the class name but I can't make .404image work for styling in CSS.

Any ideas? Thanks in advance, really stuck.

Your `img` is a string, not an object or node, so `img.className = "404image";` won't work. — j08691, Oct 13 '18 at 22:12
In your example `img` is a string. You are setting the class property of a string. Try looking up how to use `img = new Image()` and then `img.src = image_url` — Mark, Oct 13 '18 at 22:12

Johan · Answer 1 · 2018-10-13T22:17:13.207

0

A CSS class name cannot start with a digit. If you name it image404 for instance it would be accessible with .image404

Edit: It is possible to use digit as first character in a class name if you escape it. I would still not recommend it since it causes a hassle and is against most naming standards in other languages.

edited Oct 13 '18 at 22:17

answered Oct 13 '18 at 22:11

Johan

3,577
1
14
28

score 0 · Answer 2 · 2018-10-13T23:04:32.700

Try this:

img += ' class="404image" width="10%"'; /* add line */
img += '\" alt=\"404 Image."/>';
img.className  = "404image";            /* remove line */
img.width = "10%";                      /* remove line */

P.S. String does not have className or width property. Also 404image is invalid as it cannot start with a digit.

var urls = ['https://4.bp.blogspot.com/-u0ld9dGuSD4/WmzFFRAJSlI/AAAAAAAABxY/IMoM6ckwf0csjBWMkBNVxPLZSZCMIvULwCLcBGAs/s1600/404-page-not-found-200.gif', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkuw1_2s5Ig8HtoQPV_qaP0AHeJzejhoeDDuW8u4VIYxslhYS1', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMUWkb3n7kAoqRDRe8wsEy3WqZlUaPkBH1MUWyahboi7buKUzd'];
document.querySelector('._404image').src = urls[Math.floor(Math.random() * urls.length)];

._404image {
  margin: auto;
}

.container {
  position: relative;
  width: 80%;
  text-align: center;
}

<div class="container">
  <img class="_404image" />
</div>

score 0 · Answer 3 · answered Oct 13 '18 at 22:43

One thing you can do to style create and style images as HTML elements with JS is this:

var fruit_pic = document.createElement("IMG")
fruit_pic.setAttribute("src", "https://melbournechapter.net/images/fruit-transparent-berry-6.png");
fruit_pic.setAttribute("width", "90");
fruit_pic.setAttribute("height", "60");
document.body.appendChild(fruit_pic);

body {
  background-color: white;
  text-align: center;
  width: 450px;
  margin: 0;
  padding: 0;
}

p1 {
  color: blue;
  font-family: arial;
}

p2 {
  color: blue;
  font-family: arial;
}

p3 {
  font-family: arial;
}

<body>
<h1>Fruit</h1>
</body>

I pulled this from this TryIt editor.

And also made a JSFiddle for it...

score 0 · Answer 4 · answered Oct 13 '18 at 22:45

Use the Image() constructor.

var imageURLs = [
    "./images/404/random1.png"
  , "./images/404/random2.png"
  , "./images/404/random3.png"
  , "./images/404/random4.png"
  , "./images/404/random5.png"
];

function getImageTag() {
    var img = new Image();
    var randomIndex = Math.floor(Math.random() * imageURLs.length);
    img.src = imageURLs[randomIndex]
    img.alt = '404 image';
    img.style.width = '10%';
    img.className = '404image';
    return img;
}

document.body.appendChild(getImageTag());

Change output image size from JS

4 Answers4