我的window.onload有时不起作用。我该如何使其工作？

huangapple
go评论173阅读模式
英文:

My window.onload doesn't work sometimes. How do I make it work?

问题

  1. const productsJsonFile = '../products.json';
  3. // 获取和显示产品的函数
  4. async function fetchProducts() {
  5.     try {
  6.         const response = await fetch(productsJsonFile);
  7.         const products = await response.json();
  8.         displayProducts(products);
  9.     } catch (error) {
  10.         console.error('获取产品出错:', error);
  11.     }
  12. }
  14. // 显示产品的函数
  15. function displayProducts(products) {
  16.     let productContainer = document.getElementById("products");
  18.     for (let product of products) {
  20.         // 创建卡片元素
  21.         let card = document.createElement("div");
  22.         card.classList.add("card");
  24.         // 卡片应该有一个类别，初始时应该保持隐藏状态
  25.         card.classList.add("card", product.category, "hide");
  27.         // 创建图像容器
  28.         let imgContainer = document.createElement("div");
  29.         imgContainer.classList.add("image-container");
  31.         // 创建图像元素
  32.         let image = document.createElement("img");
  33.         image.setAttribute("src", product.image);
  34.         imgContainer.appendChild(image);
  35.         card.appendChild(imgContainer);
  37.         // 创建产品详情容器
  38.         let container = document.createElement("div");
  39.         container.classList.add("container2");
  41.         // 创建产品名称元素
  42.         let name = document.createElement("h5");
  43.         name.classList.add("product-name");
  44.         name.innerText = product.name.toUpperCase();
  45.         container.appendChild(name);
  47.         // 创建评分元素
  48.         let rating = document.createElement("div");
  49.         rating.classList.add("rating");
  51.         for (let i = 1; i <= 5; i++) {
  52.             let starIcon = document.createElement("i");
  53.             starIcon.classList.add("fa");
  54.             if (i <= product.rating) {
  55.                 starIcon.classList.add("fa-star");
  56.             } else if (i - 0.5 === product.rating) {
  57.                 starIcon.classList.add("fa-star-half-o");
  58.             } else {
  59.                 starIcon.classList.add("fa-star-o");
  60.             }
  61.             rating.appendChild(starIcon);
  62.         }
  64.         container.appendChild(rating);
  66.         // 创建价格元素
  67.         let price = document.createElement("h6");
  68.         price.classList.add("price");
  69.         price.innerText = "Php " + product.price + ".00";
  70.         container.appendChild(price);
  72.         card.appendChild(container);
  74.         productContainer.appendChild(card);
  75.     }
  76. }
  78. // 获取并显示产品
  79. fetchProducts();
  81. function filterProduct(value) {
  82.     // 按钮类代码
  83.     let buttons = document.querySelectorAll(".button-value");
  84.     buttons.forEach((button) => {
  85.         // 检查值是否等于 innerText
  86.         if (value.toUpperCase() == button.innerText.toUpperCase()) {
  87.             button.classList.add("active-cat");
  88.         } else {
  89.             button.classList.remove("active-cat");
  90.         }
  91.     });
  93.     // 选择所有卡片
  94.     let elements = document.querySelectorAll(".card");
  95.     // 循环遍历所有卡片
  96.     elements.forEach((element) => {
  97.         // 在单击“all”按钮时显示所有卡片
  98.         if (value == "all") {
  99.             element.classList.remove("hide");
  100.         } else {
  101.             // 检查元素是否包含类别类
  102.             if (element.classList.contains(value)) {
  103.                 // 基于类别显示元素
  104.                 element.classList.remove("hide");
  105.             } else {
  106.                 // 隐藏其他元素
  107.                 element.classList.add("hide");
  108.             }
  109.         }
  110.     });
  111. }
  113. window.onload = () => {
  114.     filterProduct("all");
  115. };
英文:

The window.onload function that I have on my code sometimes work but when I reload or re run the html, it stops working. I don't know what's the problem... Here's my entire javascript code

  1. const productsJsonFile = &#39;../products.json&#39;;
  2. // Function to fetch and display products
  3. async function fetchProducts() {
  4. try {
  5. const response = await fetch(productsJsonFile);
  6. const products = await response.json();
  7. displayProducts(products);
  8. } catch (error) {
  9. console.error(&#39;Error fetching products:&#39;, error);
  10. }
  11. }
  12. // Function to display products
  13. function displayProducts(products) {
  14. let productContainer = document.getElementById(&quot;products&quot;);
  15. for (let product of products) {
  16. // Create card element
  17. let card = document.createElement(&quot;div&quot;);
  18. card.classList.add(&quot;card&quot;);
  19. //Card should have category and should stay hidden initially
  20. card.classList.add(&quot;card&quot;, product.category, &quot;hide&quot;);
  21. // Create image container
  22. let imgContainer = document.createElement(&quot;div&quot;);
  23. imgContainer.classList.add(&quot;image-container&quot;);
  24. // Create image element
  25. let image = document.createElement(&quot;img&quot;);
  26. image.setAttribute(&quot;src&quot;, product.image);
  27. imgContainer.appendChild(image);
  28. card.appendChild(imgContainer);
  29. // Create container for product details
  30. let container = document.createElement(&quot;div&quot;);
  31. container.classList.add(&quot;container2&quot;);
  32. // Create product name element
  33. let name = document.createElement(&quot;h5&quot;);
  34. name.classList.add(&quot;product-name&quot;);
  35. name.innerText = product.name.toUpperCase();
  36. container.appendChild(name);
  37. // Create rating element
  38. let rating = document.createElement(&quot;div&quot;);
  39. rating.classList.add(&quot;rating&quot;);
  40. for (let i = 1; i &lt;= 5; i++) {
  41. let starIcon = document.createElement(&quot;i&quot;);
  42. starIcon.classList.add(&quot;fa&quot;);
  43. if (i &lt;= product.rating) {
  44. starIcon.classList.add(&quot;fa-star&quot;);
  45. } else if (i - 0.5 === product.rating) {
  46. starIcon.classList.add(&quot;fa-star-half-o&quot;);
  47. } else {
  48. starIcon.classList.add(&quot;fa-star-o&quot;);
  49. }
  50. rating.appendChild(starIcon);
  51. }
  52. container.appendChild(rating);
  53. // Create price element
  54. let price = document.createElement(&quot;h6&quot;);
  55. price.classList.add(&quot;price&quot;);
  56. price.innerText = &quot;Php &quot; + product.price + &quot;.00&quot;;
  57. container.appendChild(price);
  58. card.appendChild(container);
  59. // Create anchor element
  60. // let anchor = document.createElement(&quot;a&quot;);
  61. // anchor.setAttribute(&quot;href&quot;, &quot;#&quot;);
  62. // anchor.appendChild(card);
  63. productContainer.appendChild(card);
  64. }
  65. }
  66. // Fetch and display products
  67. fetchProducts();
  68. function filterProduct(value) {
  69. //Button class code
  70. let buttons = document.querySelectorAll(&quot;.button-value&quot;);
  71. buttons.forEach((button) =&gt; {
  72. //check if value equals innerText
  73. if (value.toUpperCase() == button.innerText.toUpperCase()) {
  74. button.classList.add(&quot;active-cat&quot;);
  75. } else {
  76. button.classList.remove(&quot;active-cat&quot;);
  77. }
  78. });
  79. //select all cards
  80. let elements = document.querySelectorAll(&quot;.card&quot;);
  81. //loop through all cards
  82. elements.forEach((element) =&gt; {
  83. //display all cards on &#39;all&#39; button click
  84. if (value == &quot;all&quot;) {
  85. element.classList.remove(&quot;hide&quot;);
  86. } else {
  87. //Check if element contains category class
  88. if (element.classList.contains(value)) {
  89. //display element based on category
  90. element.classList.remove(&quot;hide&quot;);
  91. } else {
  92. //hide other elements
  93. element.classList.add(&quot;hide&quot;);
  94. }
  95. }
  96. });
  97. }
  98. window.onload = () =&gt; {
  99. filterProduct(&quot;all&quot;);
  100. };

I really don't know how to fix it no matter how many times I researched for a way. I can't find any solution. Please help

答案1

得分: 1

以下是翻译好的部分：

我猜 - window.onload 在你的 fetchProducts() 执行之前就触发了。所以，请将最后一行改成这样：

  1. window.onload = async () => {
  2.     await fetchProducts();
  3.     filterProduct("all");
  4. };

并且在全局范围内移除 fetchProducts(); 的调用。

英文:

My guess is - window.onload fires before your fetchProducts() does its thing.

so change the last line with this

  1. window.onload = async () =&gt; {
  2.     await fetchProducts();
  3.     filterProduct(&quot;all&quot;);
  4. };

and remove the fetchProducts(); call in the global scope.

huangapple
  • 本文由 发表于 2023年6月5日 04:19:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76402253.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定