Javascript Cookie存读问题：调用GetProductPrice时出现变量未找到错误

咱们先搞定那个「GetProductPrice找不到」的引用错误，再修复代码里的其他潜在问题：

一、为什么会出现GetProductPrice未找到的错误？ #

这个错误通常是函数的定义时机或作用域不对导致的，常见修复方式有两种：

• 确保函数在全局作用域定义：如果你的GetProductPrice函数嵌套在某个局部作用域里（比如$(document).ready()或者其他函数内部），全局调用它（比如HTML里的onclick事件）就会找不到。把函数直接放在<script>标签最外层，不要嵌套在任何函数里，让它属于全局作用域。
• 确保函数在调用前加载：如果调用GetProductPrice的代码（比如页面加载时自动调用、按钮点击事件）比函数定义的代码先执行，也会触发这个错误。你可以把定义函数的<script>放在调用代码的前面，或者把调用逻辑放到DOMContentLoaded事件里，确保页面和函数都加载完成后再执行：

  <!-- 先加载函数定义 -->
  <script>
  function GetProductPrice(productIdz) {
    // 函数逻辑
  }
  </script>
  <!-- 再执行调用 -->
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    // 示例：页面加载时展示ID为1的产品价格
    GetProductPrice(1);
  });
  </script>
  

二、修复GetProductPrice里的Cookie逻辑错误 #

就算函数能找到，你当前代码还有个明显bug：读取的是标记首次运行的hasRunCookie，而不是存储产品列表的ProductListCookie，这会导致JSON解析失败。修复后的函数如下：

function GetProductPrice(productIdz) {
  // 读取正确的产品列表Cookie
  var json_str = getCookie('ProductListCookie');
  
  // 先判断Cookie是否存在，避免解析空值报错
  if (!json_str) {
    console.error('产品列表Cookie不存在，请检查setUpProducts函数是否正常执行');
    document.getElementById("price").innerHTML = '价格未知';
    return;
  }

  try {
    var productList = JSON.parse(json_str); // 声明局部变量，避免污染全局
    // 遍历找到对应ID的产品
    for (var i = 0; i < productList.length; i++) {
      if (productList[i].productID == productIdz) {
        document.getElementById("price").innerHTML = productList[i].productPrice;
        break; // 找到后跳出循环，提升性能
      }
    }
  } catch (e) {
    console.error('解析产品列表Cookie失败:', e);
    document.getElementById("price").innerHTML = '价格加载失败';
  }
}

三、修复setUpProducts里的异步AJAX问题 #

你的setUpProducts函数中，$.get是异步操作，后面的for循环和while循环会在AJAX请求完成前执行，导致dataList还是空数组，根本生成不了产品列表。必须把处理数据和生成产品的逻辑放到AJAX的回调函数里：

function setUpProducts() {
  setUpPages();
  var hasRun;
  try {
    hasRun = getCookie('hasRunCookie');
  } catch {
    hasRun = 0;
  }

  if (hasRun != 1) {
    hasRun = 1;
    createCookie('hasRunCookie', hasRun);
    var productList = []; // 提前声明产品列表

    $.get('../productdata.txt', function(data) {
      var dataList = data.split("\n").filter(line => line.trim() !== ''); // 过滤空行
      var nameList = [];
      var priceList = [];
      var set1 = 0;

      // 处理文本数据，拆分名称和价格
      $.each(dataList, function(n, elem) {
        $('#myid').append('<div>' + elem + '</div>');
        if (set1 === 0) {
          nameList.push(elem);
          set1 = 1;
        } else {
          priceList.push(elem);
          set1 = 0;
        }
      });

      // 生成产品对象
      for (var productIds = 0; productIds < 8; productIds++) { // 用for循环更清晰
        var productObject = {
          productID: productIds,
          productName: nameList[productIds],
          productPrice: priceList[productIds],
          purchasedAmount: 0
        };
        productList.push(productObject);
      }

      // 存储产品列表到Cookie
      var json_str = JSON.stringify(productList);
      createCookie('ProductListCookie', json_str);
    });
  }
}

这样调整后，不仅能解决函数未找到的错误，还能确保产品列表正确生成并存储，后续加载价格也能正常工作。

内容的提问来源于stack exchange，提问作者Jobalisk