Is it possible to have multiple scripts call the same script?

Question

I have four divs, and I want them to show random images. I got this code from SO and it works:

<script type="text/javascript">
        function get_image(div_id){
            var imgCount = 3;
            var dir = 'images/';
            var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
            var images = new Array
                images[1] = "1.jpg",
                images[2] = "2.jpg",
                images[3] = "3.jpg",
            document.getElementById(div_id).style.backgroundImage = "url(" + dir + images[randomCount] + ")";
            console.log("div_id = " + div_id)
        }
    </script>

It is called from the divs like this:

<div class="image_holder" id="left_top">
                <script id="lt_innerscript">
                    var div_id = document.getElementById("lt_innerscript").parentElement.id;
                    var myVar = setInterval(function() { get_image(div_id); }, 800);
                </script>   
            </div>

The problem is, only the last one is showing an image, all the others are blank. Is this possible, and what am I doing wrong?

There is some css to style the divs, they live in 2 separate divs, with ids "left" and "right."

#left{
    float: left;
    background: blue;
    width: 300px;
    height: 100%;
    color: #005CB9;
}

and

.image_holder {
    position: relative;
    width: 300px;
    height: 256px;
}

I suppose the other div's have ids like `left_bottom,right_top,right_bottom`? — user202729, Feb 10 '19 at 13:26
What you're trying to do is [javascript - How may I reference the script tag that loaded the currently-executing script? - Stack Overflow](https://stackoverflow.com/questions/403967/how-may-i-reference-the-script-tag-that-loaded-the-currently-executing-script) ; however that's not a good way to do this because it leads to unnecesry code duplication. — user202729, Feb 10 '19 at 13:27
you have the SAME id for the script, use different ids for different copies of the same script or even better dont use ids for the script simply directly use the id of the parent, or even better remove all copies of the script and add only one copy which gets parent elements by ids and applies the random image in one pass for all — Nikos M., Feb 10 '19 at 13:27
if something like this : https://repl.it/@Ashar_Dweedar/Example-random-backgrounds is what you want then probably u have a small error like the comma at the end of the line `images[3] = "3.jpg",` — Ashar Dweedar, Feb 10 '19 at 14:01
user202729 - yes! Ashar: the comma is in the original - I wondered about this as well; see: https://stackoverflow.com/questions/14602482/random-image-background-in-div. — marienbad, Feb 10 '19 at 14:05
adding the comma will mean u r declaring a new variable following the previous ones .. removing them makes everything works fine , check this : https://repl.it/@Ashar_Dweedar/Example-random-backgrounds-1 — Ashar Dweedar, Feb 10 '19 at 14:12
Ashar: I removed the comma on it is still only showing the last image — marienbad, Feb 10 '19 at 14:35
https://repl.it/@Ashar_Dweedar/Example-random-backgrounds-1 the code here works fine and switches between the images — Ashar Dweedar, Feb 10 '19 at 15:03
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/188181/discussion-between-ashar-dweedar-and-marienbad). — Ashar Dweedar, Feb 10 '19 at 15:11

score 0 · Answer 1 · answered Feb 11 '19 at 15:07

For anyone else in this situation, I solved it like this...

Here is the code from SO, slighty modified for my needs (the images are numbered 1.jpg, 2.jpg etc):

function show_images(the_div){
    console.log(the_div)
    var imgCount = 19;
    var dir = 'images/';
    var imagenum = Math.round(Math.random() * (imgCount - 1)) + 1;
    var theimage = imagenum.toString() + ".jpg"
    document.getElementById(the_div.id).style.backgroundImage = "url(" + dir + theimage + ")";

}

So instead of having scripts in each div element to call it, I have this, which gets the divs from each side panel:

    function get_divs(){
        var left = document.getElementById("left");
        var right = document.getElementById("right");

        var l_divs = left.getElementsByTagName("div");
        var r_divs = right.getElementsByTagName("div");

        return [l_divs, r_divs]
    }

This is called by the following code, which takes the divs, generates three random numbers between 1 and 6, in a loop. Numbers less than 3 are used for the left side and above 4 for the right side, but as there are only 3 divs per side, if the number is > 4 it subtracts 3.

it then sets the div image using the above show_images() code.

function update_divs(){
    divs = get_divs()
    l_divs = divs[0]
    r_divs = divs[1]

    for(var i=0; i<4; i++){
        rnd = Math.floor((Math.random() * 6));
        if (rnd <= 2){
            show_images(l_divs[rnd])
        }else{
            rnd -= 3;
            show_images(r_divs[rnd])
     }
}

}

and then I just added at the end of the page:

<script>    
    setInterval(update_divs, 1600)
</script>

Is it possible to have multiple scripts call the same script?

1 Answers1