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

Question

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

If it works for the button, why wouldn't it work elsewhere? Please be more clear and concise on your vision. Do you want the images to load automatically without the button, or with some other DOM event? If so see something like `onload` for an alternative. Otherwise be clear about the end result. Even though you said you tried document.onload include code that you tried it with so we have a good starting point — soulshined, May 15 '18 at 22:38
Use `window.onload`: https://jsfiddle.net/4re19v9m/ (you might have better luck searching for "run JS code when page has loaded", without looking for loading images specifically; always break down problems into parts. 1st google result: https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — , May 15 '18 at 23:03
@aemaeth0 I just tested your website and the button seems to work just fine. An image is randomly set like intended. What is it you were trying to accomplish? — FrenchMajesty, May 15 '18 at 23:21
@FrenchMajesty I wanted to have it load using and no button. I only put the button there to test to see if I could get the images to load in the first place, because I was getting an empty box initially. — ennth, May 16 '18 at 00:22
@soulshined Yes, I wanted it to load without the button. I know it sounds trivial as you stated, because I thought the same thing (i.e. because I got the button working , surely, it must be easy to do it without the button). But then 2hours went by, and I still couldn't get it to work. I 'll check the onload option but believe I tried something like that already. Thank you. — ennth, May 16 '18 at 00:23
Possible duplicate of [How do I call a JavaScript function on page load?](https://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load) — soulshined, May 16 '18 at 01:28
@soulshined Which in turn is a dupe of https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load ;) — , May 16 '18 at 11:04
Possible duplicate of [JavaScript that executes after page load](https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load) — , May 16 '18 at 11:11

score 0 · Answer 1 · answered May 16 '18 at 05:42

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!

I have to point out a few things: 1. calling code after page load and assigning a random src to an `` are two mostly unrelated, separate issues - 2. passing an `id` param is only useful/required if you have more than one image - 3. using an array is a third, unrelated technique, not an alternative solution to your problem; and it's required if you have arbitrary filenames for your images - 4. this question is a duplicate and will not benefit anybody, and your answer is even more specific and has an even lesser chance of helping anybody — , May 16 '18 at 11:09

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

1 Answers1