JS遍历嵌套对象取值并追加渲染到HTML的问题排查

你的代码有3个核心语法/逻辑错误，直接导致报价无法正常渲染：

• 作用域错误：finalquote 是在if/else的代码块内部用const声明的，属于块级作用域变量，块外的return finalquote根本访问不到这个变量，运行时会直接抛出引用错误，函数返回undefined，页面自然渲染不出价格。
• 对象属性访问语法错误：你写的costs.typeValue.complexityValue.xxx是错误写法——点号后面跟的是固定属性名，不会解析你存了下拉框值的变量，相当于一直在找costs下名为typeValue的不存在属性，拿到的永远是undefined，后续属性访问直接报错。
• 键名匹配风险：你costs对象里的尺寸键都带前置下划线（比如_10x10、_3x5），如果下拉框的value没带这个下划线，就算前面逻辑改对了也匹配不到对应价格。
• 额外排查点：先确认你已经正确获取了所有DOM元素（typeElement、复杂度选择框、三个类型对应的尺寸选择框、提交按钮、报价容器），如果元素拿成null也会直接中断逻辑。

首先修正calculateQuote函数，再确认事件逻辑里的元素取值正确：

const costs = {
  "painting": {
    "simple": {
      "_10x10": "25", 
      "_11x14": "55", 
      "_16x20": "75", 
      "_18x24": "100"
    },
    "complex": {
      "_10x10": "55", 
      "_11x14": "75", 
      "_16x20": "100", 
      "_18x24": "150-250"
    }
  },
  "pencil": {
    "simple": {
      "_11x14": "150"
    },
    "complex": {
      "_11x14": "150"
    }
  },
  "mural": {
    "simple": {
      "_3x5": "200-300", 
      "_8x12": "750", 
      "_10x12": "950", 
      "_8x24": "1,500"
    },
    "complex": {
      "_3x5": "500", 
      "_8x12": "1,150", 
      "_10x12": "1,400", 
      "_8x24": "2,300"
    }
  }
}

function calculateQuote(){
  // 提前在函数作用域声明返回值，避免块级作用域问题
  let finalquote;
  const selectedType = typeElement.value;
  const selectedComplexity = complexityElement.value;
  let selectedSize;

  // 根据选中的作品类型取对应尺寸框的值
  if(selectedType === "painting"){
    selectedSize = paintingSizeElement.value;
    // 如果你的尺寸下拉框value没带前置下划线，打开下面这行注释补前缀
    // selectedSize = `_${selectedSize}`;
  } else if(selectedType === "pencil"){
    selectedSize = pencilSizeElement.value;
    // selectedSize = `_${selectedSize}`;
  } else {
    selectedSize = muralSizeElement.value;
    // selectedSize = `_${selectedSize}`;
  }

  // 动态属性用方括号访问，才能正确解析变量值，加可选链做容错
  finalquote = costs[selectedType]?.[selectedComplexity]?.[selectedSize] || "暂不支持该规格报价";
  return finalquote;
}

submit.onclick = function(){
  hideDiv(complexityElement);
  hideDiv(complexityLabelElement);
  hideDiv(submit);
  let clientQuote = document.createElement('p');
  clientQuote.innerHTML = `您的作品报价为：${calculateQuote()}`;
  quoteDiv.appendChild(clientQuote);
  quoteDiv.style.display = "block";
}

• 把finalquote的声明提到函数最外层，确保return语句能正常访问到变量
• 所有动态取值的对象属性，统一用[变量名]的方括号语法访问，替代原来错误的点号接变量名写法
• 加了可选链?.做容错，就算选到不存在的规格组合，也不会直接抛出JS错误中断页面逻辑，会返回兜底提示
• 留了尺寸键名适配的注释，如果你的下拉框value没带下划线，打开对应注释就能自动拼接前缀匹配costs里的键

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