点击按钮生成随机SKU时触发Uncaught ReferenceError错误求助

看起来你遇到了两个核心问题：一是函数作用域导致全局访问不到randomSKU，二是随机SKU的逻辑完全不符合你的需求。我来一步步帮你修复：

错误根源拆解 #

1. 作用域问题：你把randomSKU定义在bootRentData的forEach回调函数内部，这意味着这个函数只能在那个回调的局部作用域里访问，而按钮的onclick事件是在全局作用域触发的，自然找不到它。
2. 逻辑错误：你试图从单个book.sku（这是个字符串）里取随机字符，但你的需求是从整个对象数组里随机选一个SKU，这完全南辕北辙了。

修复后的完整代码 #

HTML部分（优化事件绑定方式） #

<div class="container">
 <input type="button" id="SKUsearch" value="Search" />
 <p id="message"></p>
 <!-- 加个表格容器，避免直接操作未定义的wrap变量 -->
 <table id="bookTable"></table>
</div>

JavaScript部分（修复作用域和逻辑） #

// 先定义你的数据源（可以放在全局，或者封装成模块，这里简化处理）
const bookData = [
  {sku: '101ZS536', price: 4.37 }, 
  { sku: '10134QYT', price: 42.61 }, 
  { sku: '10134QYT', price: 53.31 }, 
  { sku: '10134QYT', price: 0 }, 
  { sku: '10134QYT', price: 3.46 } 
];

// 负责渲染表格的函数
function bootRentData() {
  const bookTable = document.getElementById('bookTable');
  // 先加表头，让表格更清晰
  let tableContent = '<tr><th>SKU</th><th>Price</th></tr>';
  
  bookData.forEach(book => {
    tableContent += `<tr>
      <td>${book.sku}</td>
      <td>${book.price}</td>
    </tr>`;
  });
  
  bookTable.innerHTML = tableContent;
}

// 生成随机SKU的函数，放在全局作用域（或通过事件监听绑定）
function randomSKU() {
  // 从bookData数组里随机选一个索引
  const randomIndex = Math.floor(Math.random() * bookData.length);
  // 获取对应索引的对象，取出它的sku
  const randomSku = bookData[randomIndex].sku;
  // 用textContent比innerHTML更安全，适合纯文本展示
  document.getElementById("message").textContent = randomSku;
}

// 页面加载完成后再执行初始化操作，避免找不到DOM元素
document.addEventListener('DOMContentLoaded', () => {
  // 用addEventListener绑定点击事件，比onclick属性更灵活现代
  document.getElementById('SKUsearch').addEventListener('click', randomSKU);
  // 初始化渲染表格
  bootRentData();
});

关键修改点说明 #

• 作用域修复：把randomSKU移到全局作用域，或者通过addEventListener直接绑定，确保按钮点击时能找到这个函数。
• 逻辑修正：不再操作单个sku字符串，而是从整个bookData数组中随机选取索引，再获取对应对象的sku，完全符合你“从对象数组生成随机SKU”的需求。
• 安全优化：用textContent代替innerHTML，避免不必要的HTML解析风险，更适合纯文本展示场景。
• DOM加载时机：用DOMContentLoaded确保DOM元素都加载完成后再执行JS，避免出现“找不到元素”的潜在问题。

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