JQuery点击器游戏JavaScript失效：按钮文本不显示求助

从你贴的代码来看，有几个关键问题会导致JavaScript功能失效、按钮无预期文本，我帮你逐一梳理并给出修复方案：

1. 致命拼写错误（核心失效原因） #

在setInterval的回调代码里，你写了nummicriomissiles，但之前定义的变量是nummicromissiles（少写了一个r）。这个拼写错误会触发未定义变量错误，直接终止所有JavaScript代码的执行——这就是你添加代码后功能全挂的主要原因。

2. 按钮无初始文本 #

你的HTML按钮都是空标签，自然看不到任何文本，需要给每个按钮添加初始显示内容。

3. HTML结构不规范 #

<head>标签没有闭合，<style>标签也未正确闭合，这会导致浏览器解析页面结构出错，间接影响JS的执行逻辑。

4. 按钮状态初始化缺失 #

页面刚加载时，按钮的禁用状态没有初始化，要等到setInterval第一次执行才会更新状态，会出现短暂的状态异常。

修复后的代码示例 #

修正后的JavaScript代码 #

$(document).ready(function() { 
    var credits = 0; 
    var creditstarter = 1; 
    var hanzounlocked = 0; 
    var hanzocost = 100; 
    var numsonicarrow = 0; 
    var sonicarrowcost = 50; 
    var numscatterarrow = 0; 
    var scatterarrowcost = 280; 
    var numdragonstrike = 0; 
    var dragonstrikecost = 1000; 
    var junkratunlocked = 0; 
    var junkratcost = 4500; 
    var numtrap = 0; 
    var trapcost = 5000; 
    var numconcussionmine = 0; 
    var concussionminecost = 8000; 
    var numriptire = 0; 
    var riptirecost = 16000; 
    var tracerunlocked = 0; 
    var tracercost = 50000; 
    var numblink = 0; 
    var blinkcost = 15000; 
    var numrecall = 0; 
    var recallcost = 40000; 
    var numpulsebomb = 0; 
    var pulsebombcost = 100000; 
    var dvaunlocked = 0; 
    var dvacost = 400000; 
    var numdefencematrix = 0; 
    var defencematrixcost = 100000; 
    var nummicromissiles = 0; 
    var micromissilescost = 185000; 
    var numselfdestruct = 0; 
    var selfdestructcost = 900000; 

    // 初始化按钮文本
    $('#openlootbox').text('开补给箱');
    $('#hanzo').text(`解锁半藏 (${hanzocost} 信用点)`);
    $('#sonicarrow').text(`购买音箭 (${sonicarrowcost} 信用点)`);
    $('#scatterarrow').text(`购买散箭 (${scatterarrowcost} 信用点)`);
    $('#dragonstrike').text(`购买龙刃 (${dragonstrikecost} 信用点)`);

    // 初始化按钮状态
    updateButtonStates();

    $('#openlootbox').on('click', function () { 
        credits = credits + creditstarter + numdragonstrike + numriptire + numpulsebomb + numselfdestruct; 
        updateButtonStates();
    }); 

    $('#hanzo').on('click', function (){ 
        hanzounlocked++; 
        credits -= hanzocost; 
        updateButtonStates();
    }); 

    $('#sonicarrow').on('click', function () { 
        numsonicarrow++; 
        credits -= sonicarrowcost; 
        sonicarrowcost = Math.ceil(sonicarrowcost * 1.2); 
        $('#sonicarrow').text(`购买音箭 (${sonicarrowcost} 信用点)`);
        updateButtonStates();
    }); 

    $('#scatterarrow').on('click', function () { 
        numscatterarrow++; 
        credits -= scatterarrowcost; 
        scatterarrowcost = Math.ceil(scatterarrowcost * 1.2); 
        $('#scatterarrow').text(`购买散箭 (${scatterarrowcost} 信用点)`);
        updateButtonStates();
    }); 

    $('#dragonstrike').on('click', function() { 
        numdragonstrike++; 
        credits -= dragonstrikecost; 
        dragonstrikecost = Math.ceil(dragonstrikecost * 1.2); 
        $('#dragonstrike').text(`购买龙刃 (${dragonstrikecost} 信用点)`);
        updateButtonStates();
    }); 

    // 抽离按钮状态更新逻辑，避免重复代码
    function updateButtonStates() {
        if(hanzounlocked > 0){ 
            $('#hanzo').prop('disabled', true); 
            $('#scatterarrow').prop('disabled', false); 
            $('#sonicarrow').prop('disabled', false); 
            $('#dragonstrike').prop('disabled', false); 
        } else { 
            $('#sonicarrow').prop('disabled', true); 
            $('#hanzo').prop('disabled', false); 
            $('#dragonstrike').prop('disabled', true); 
            $('#scatterarrow').prop('disabled', true); 
        } 

        if(credits < hanzocost){ 
            $('#hanzo').prop('disabled', true); 
        } 
        if(credits < scatterarrowcost){ 
            $('#scatterarrow').prop('disabled', true); 
        } 
        if(credits < sonicarrowcost){ 
            $('#sonicarrow').prop('disabled', true); 
        } 
        if(credits < dragonstrikecost){ 
            $('#dragonstrike').prop('disabled', true); 
        }
    }

    window.setInterval(function () { 
        // 更新信用点显示
        $('#credits').text(Math.floor(credits)); 

        credits += (numsonicarrow * 1 / 100); 
        credits += (numscatterarrow * 5 / 100); 
        credits += (numconcussionmine * 15 / 100); 
        credits += (numtrap * 50 / 100); 
        credits += (numblink * 150 / 100); 
        credits += (numrecall * 390 / 100); 
        credits += (numdefencematrix * 1170 / 100); 
        // 修正拼写错误：nummicriomissiles → nummicromissiles
        credits += (nummicromissiles * 3120 / 100); 

        updateButtonStates();
    }, 10); // 明确设置定时器间隔，默认10ms
})

修正后的HTML代码 #

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>OW Clicker</title> 
    <link rel="stylesheet" href="clicker.css" type="text/css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
    <script type="text/javascript" src="newgame.js"></script> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Luckiest+Guy" /> 
    <style type="text/css"> 
        /* 可在此添加自定义样式 */
    </style> 
</head> <!-- 闭合head标签 -->
<body> 
    <p>当前信用点: <span id="credits">0</span></p> <!-- 添加信用点显示元素 -->
    <button id="openlootbox"></button> 
    <button id="hanzo"></button> 
    <button id="sonicarrow"></button> 
    <button id="scatterarrow"></button> 
    <button id="dragonstrike"></button> 
</body> 
</html>

额外排查建议 #

• 打开浏览器开发者工具（F12），切换到Console标签页，这里会显示所有JS报错信息，是排查这类问题最直接的方式。
• 修改代码后记得清空浏览器缓存再刷新，避免加载旧的JS文件。
• 把重复逻辑抽成函数（比如上面的updateButtonStates），既能减少出错概率，也方便后续维护。

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