Set width and height for image random by Javascript

Question

Something hard to understand for me that, how can I set width and height for the random images when they displayed. Can anyone help me, please?

This is my code

    function randomImage(){
        var imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg'];
        var num = Math.floor(Math.random() * 3);
        document.canvas.src = imagesArray[num];
    }

<!DOCTYPE html>
    <html lang="en">
        <head>
           <meta charset="UTF-8">
           <title>Display random image</title>
        </head>

        <body>
           <input type="button" id="randomImage" onclick="randomImage()" value="Random">
           <img src="" name="canvas" />
        </body>
      </html>

And I do not know how to set width and height so I did not write code for this yet, this code just display images random when I click button

Your help is my pleasure

`document.getElementsByName("canvas")[0].src = imagesArray[num];` and for width / height: `document.getElementsByName("canvas")[0].style.width = "100px";` `document.getElementsByName("canvas")[0].style.height= "100px";` — Jarlik Stepsto, Jun 18 '20 at 07:05

Jarlik Stepsto · Accepted Answer · 2020-06-19T08:18:29.120

To identify your image by name attribute, use getElementsByName or the newer querySelector and for setting width and height you can use style attribute:

document.getElementsByName("canvas")[0].src = imagesArray[num];

or

document.querySelector("img[name=canvas]").src = imagesArray[num];

and for width and height (you can also use querySelector here):

document.getElementsByName("canvas")[0].style.width = "100px";      
document.getElementsByName("canvas")[0].style.height= "100px";

function randomImage(){
  let imagesArray = ['images/person1.jpg', 'images/person2.jpg', 'images/person3.jpg'];
  let num = Math.floor(Math.random() * 3);
  let image = document.getElementsByName("canvas")[0];
  image.src = imagesArray[num];
  image.style.width = "100px";
  image.style.height = "100px";
}

<input type="button" id="randomImage" onclick="randomImage()" value="Random">
<img src="" name="canvas" />

if you want a random value for width and height, use it instead of the 100 in my sample

score 0 · Answer 2 · answered Jun 18 '20 at 07:11

You should create a class: "image"

and in CSS you should add: .image{ width: 220px; // you put your value here height: auto; // to considere the proportions of the image }

I am notsure if this answers your question, but you can also choose other approach you can do as following:

<div class="wrapper">
<img>
</div>

where .wrapper has overflow set to hidden and img has width of 100% and height auto,

KooiInc · Answer 3 · 2020-06-18T07:33:57.967

You could've used window.canvas here, but that's not advisable. To retrieve one element, document.querySelector is your friend.

randomImage();

document.addEventListener("click", evt => {
  if (evt.target.nodeName === "BUTTON") {
    randomImage();
  }
});

function randomImage() {
  const imagesArray = [
    'https://picsum.photos/200/300',
    'https://picsum.photos/300/400',
    'https://picsum.photos/100/100'
  ];
  const randomNumber = Math.floor(Math.random() * 3);
  document.querySelector("img[name='canvas']").src = imagesArray[randomNumber];

}

button {
  float: right;
  position: fixed;
  right: 30vw;
  top: 1rem;
}

<img name="canvas" src="" />
<br><button>Another picture</button>

Set width and height for image random by Javascript

3 Answers3