动态更改 HTML 元素的属性?

问题描述 投票:0回答:1

我正在尝试将图像和特定 HTML 元素的内容更改为存储在 .js 文件中的内容。内容存储在导入到 main.js 的另一个 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"
        }
    ];
}

预计会在加载时更新页面。文件运行顺利,没有出现任何重大问题,但没有应用任何更改。

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);
javascript html element document-ready
1个回答
0
投票

您的函数代码从未真正被调用,当前您只是声明一个名为

products_gen
的函数,但从未调用它。如果删除下面的两行注释,这将使您的代码实际在文档准备就绪时运行。

或者,您可以保留命名函数,只需添加

products_gen()
作为其后的下一行即可实际调用它。

如果您将

console.log(product_list)
添加到现有函数中,您应该能够看到它从未真正运行。

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);

© www.soinside.com 2019 - 2024. All rights reserved.