Dynamically changing the attributes of a HTML element?

I’m trying to change the image and the contents of a specific HTML element to the content stored in a .js file. The content was stored in an object declared in another js file imported into main.js.

export function products() {
return
    [
        {
            "id": "1001",
            "name": "MG RX-78-2 3.0",
            "scale": "1/100",
            "comp": "Bandai",
            "price": "1,350,000 đ",
            "type": "MG",
            "status": 1,
            "poster": "https://cdn.shopify.com/s/files/1/2786/5582/products/mg-rx-78-2-gundam-ver-3-0-pa_1.jpg?v=1660244450"
        }
    ];
}

It was expected to update the page on load. The file ran smoothly without any major problems popping up, but there was no change applied.

import { products } from "./data.js";
(function ($) {
    "use strict";
    $(document).ready(function () {
        function products_gen() {
            let product_list = products();
            let check = [];
            for(let i = 0; i < product_list.length(); i++){
                check.push(false);
            }
            for(let i = 0; i < 8; ){
                let rando = Math.floor(Math.random()*product_list.length());
                if(!check[rando]){
                    check[rando] = true;
                    document.getElementById("products_1_poster").src = product_list[rando].poster;
                    console.log(document.getElementById("products_1_poster").src);
                    document.getElementById("products_1_name").innerHTML = product_list[rando].name;
                    document.getElementById("products_1_price").innerHTML = product_list[rando].price;
                    i++;
                }
            }
        }
    });   
})(jQuery);

>Solution :

Your function code is never actually getting invoked, currently you’re just declaring a function called products_gen but never calling it. If you remove the two commented lines below, that will let your code actually run on document ready.

Alternatively, you could keep the named function and just add products_gen() as the next line after it to actually invoke it.

If you add a console.log(product_list) to your existing function, you should be able to see that it never actually runs.

import { products } from "./data.js";
(function ($) {
    "use strict";
    $(document).ready(function () {
       // function products_gen() {
            let product_list = products();
            let check = [];
            for(let i = 0; i < product_list.length(); i++){
                check.push(false);
            }
            for(let i = 0; i < 8; ){
                let rando = Math.floor(Math.random()*product_list.length());
                if(!check[rando]){
                    check[rando] = true;
                    document.getElementById("products_1_poster").src = product_list[rando].poster;
                    console.log(document.getElementById("products_1_poster").src);
                    document.getElementById("products_1_name").innerHTML = product_list[rando].name;
                    document.getElementById("products_1_price").innerHTML = product_list[rando].price;
                    i++;
                }
            }
        //}
    });   
})(jQuery);