CODEWITHSUNDEEP
javascripthtmlcssimagesrc
PainIsAMaster
PainIsAMaster

Reputation: 2076

Calling JavaScript function (random img generator) inside html img src code

I've searched the web and all through old Stack Overflow posts. I've been trying a method suggested where you use the html tag with an empty src="" address:

<img id = "imageid" src="">

and then the corresponding Javascript code:

  function randomImg(){
var randomNumber = Math.floor(Math.random() * 12) + 1;
var imgName = "img_" + randomNumber + ".jpg";
document.getElementById("imageid").src= YOUR_IMG_PATH + "/" + imgName ;
}

Thus, I have 12 images, all named img_1.jpg through img_12.jpg, and yes, I have checked their director and got them to load via this function on my website, oddly enough, only through using this code for a button. I have not been successful simply getting the image to load via the standard html img tag:

<button type="button" onclick="randomImg()">Try it</button>

I've seen other old posts that recommend using document.onload = function() but that did not work for me (I also found a post where a Stack Overflow user stated document.onload will NOT generate a img src address for empty src="" tag). I've always tried formatting things differently, i.e. using '' instead of "" for certain parts of the code.

My last effort will be to use an array, but I wanted to see if I could possible solve this the way I'm doing it now because I feel I am missing something completely basic and obvious.

The website is http://aemaeth0.github.io

Upvotes: 1

Views: 332

Answers (2)

Pakainfo
Pakainfo

Reputation: 1

Create an HTML img element with an id attribute that you can use to reference it in your JavaScript code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Image Generator - yttags.com</title>
</head>
<body>
    <img id="randomImage" src="" alt="Random Image">
    <script src="your-script.js"></script>
</body>
</html>

Create a JavaScript function that generates a random image URL. You can define an array of image URLs and use JavaScript to select a random one from the array.

    // your-script.js

// An array of image URLs
const imageUrls = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg',
    // Add more image URLs here
];

// Function to generate a random index
function getRandomIndex(max) {
    return Math.floor(Math.random() * max);
}

// Function to set a random image source
function setRandomImage() {
    const imgElement = document.getElementById('randomImage');
    const randomIndex = getRandomIndex(imageUrls.length);
    const randomImageUrl = imageUrls[randomIndex];
    imgElement.src = randomImageUrl;
}

// Call the function to set the initial random image
setRandomImage();

Upvotes: 0

PainIsAMaster
PainIsAMaster

Reputation: 2076

OK, thank you guys, I used the code alterations @Chris G provided. Essentially it was him passing "id" through the function and using window.onload. This is the exact code:

<img id="img1" src="">
    <script>
    function randomImg(id) {
    var randomNumber = Math.floor(Math.random() * 12) + 1;
    var imgName = "img_" + randomNumber + ".jpg";
    document.getElementById(id).src= imgName;
    }
    window.onload = function() {
  randomImg("img1");
    }
    </script>

I've coded in Java, C++ and MATLAB, and have went up to Data Structures/Object Orientated Programming at Uni, but haven't done alot of Javascript and the small syntax principles (i.e. such as the "id" in passing id as a parameter in the function) threw me off.

I hope this helps anyone attempting to randomly generate images via javascript on their website, especially if they don't want to use arrays.

Thanks again for all that helped out!

Upvotes: 0

Related Questions