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
– Jarlik Stepsto, Commented Jun 18, 2020 at 7:05

Jarlik Stepsto · Accepted Answer · 2020-06-19 08:18:29Z

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

Marek Panti · Accepted Answer · 2020-06-18 07:11:01Z

0

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,

answered Jun 18, 2020 at 7:11

Marek Panti

1261 silver badge9 bronze badges

Comments

KooiInc · Accepted Answer · 2020-06-18 07:33:57Z

0

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>

edited Jun 18, 2020 at 7:33

answered Jun 18, 2020 at 7:28

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Collectives™ on Stack Overflow

Set width and height for image random by Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related