个人项目：抽奖网站无法显示winPercentage变量问题求助

我一眼就揪出问题啦——这是个前端新手常踩的ID大小写不匹配坑！浏览器对元素ID的大小写是严格敏感的，你的代码里两边ID不一致，导致JS找不到对应的元素，自然没法把胜率值渲染出来。

问题具体拆解： #

• 你在script.js里用的是：document.getElementById("winPercentageID")（注意最后一个字母是大写的D）
• 但HTML里的span标签ID是：<span id = "winPercentageId"></span>（最后一个字母是小写的d）

就因为这一个大小写的差异，JS找不到目标元素，页面上的对应位置自然是空的。

修正方案： #

把两边的ID统一就行，选一种格式保持一致：

方案1：修改JS里的ID为小写

var winPercentage = winCount / gameCount * 100;
document.getElementById("winPercentageId").innerHTML = winPercentage;

方案2：修改HTML里的ID为大写

Your Win Percentage is : <br> 
<span id="winPercentageID"></span>

额外优化建议： #

• 要确保winCount和gameCount已经被正确赋值哦，如果其中一个是0或者未定义，要么会算出NaN，要么会触发除以0的错误。
• 最好把JS代码放在HTML的</body>标签之前，或者用DOMContentLoaded事件包裹，保证DOM元素加载完成后再执行JS，避免“找不到元素”的问题。比如：

document.addEventListener('DOMContentLoaded', function() {
    // 替换成你实际的统计数值
    var winCount = 7;
    var gameCount = 20;
    // 保留两位小数并加上百分号，显示更友好
    var winPercentage = (winCount / gameCount * 100).toFixed(2) + "%";
    document.getElementById("winPercentageId").innerHTML = winPercentage;
});

这样调整后，你的胜率就能正常显示在页面上啦！

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