JavaScript实现数组存当前变量、取前序变量及点击计数问题求助

原代码核心问题 #

• myARR被定义在函数内部，每次点击都会重新创建，且错误地用clicked_id[12]赋值（clicked_id是字符串，索引12不存在，所以alert返回undefined）
• 未给「Prior Number」和「已点击总数」准备对应的DOM元素，无法展示内容
• HTML结构不规范，button标签写法错误
• 引入了两个冲突的jQuery版本，实际无需jQuery即可实现需求

修改后的完整代码 #

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
    <script type="text/javascript">
        // 全局定义数组，保存所有点击的数字ID
        let myARR = [];

        function reply_click(clicked_id) {
            // 将当前点击的ID存入数组
            myARR.push(clicked_id);

            // 更新NEW NUMBER区域
            document.getElementById("clicked_id").innerHTML = clicked_id;

            // 更新Prior Number区域
            const priorEl = document.getElementById("prior_number");
            if (myARR.length >= 2) {
                // 取数组倒数第二个元素（上一次点击的数字）
                priorEl.innerHTML = myARR[myARR.length - 2];
            } else {
                priorEl.innerHTML = "";
            }

            // 更新已点击总数区域
            document.getElementById("total_count").innerHTML = myARR.length;
        }

        // 保留原项目中的颜色切换函数（如果需要）
        function ManualColorBlue(el) {
            el.style.backgroundColor = "#0080FF";
        }

        function ManualColorBACK(el) {
            el.style.backgroundColor = "";
        }
    </script>
</HEAD>
<BODY STYLE="background-color: yellow">
    <TABLE width="100%" border="1">
        <TR>
            <TD><CENTER>
                <B>NEW NUMBER</b><BR>
                <span style="font-size: 89px" id="clicked_id"></span>
                
                <HR width="100%">
                
                <B>Prior Number</b><BR>
                <span style="font-size: 89px" id="prior_number"></span>
                
                <HR width="100%">
                
                <B>How Many Numbers Picked</b><BR>
                <span style="font-size: 89px" id="total_count"></span>
            </CENTER></TD>
        </TR>
    </TABLE>

    <FORM NAME="numbers">
        <TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0">
            <TR><TD COLSPAN="3">
                <!-- numbers table -->
                <TABLE WIDTH="100%" BORDER="1" CELLPADDING="0" CELLSPACING="1" STYLE="background-color: #0080FF; font-size: x-large; font-family: sans-serif; font-weight: 900; text-align: center" bgcolor=#0080FF>
                    <TR>
                        <TD><button id="01" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>1</BIG></button></TD>
                        <TD><button id="02" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>2</BIG></button></TD>
                        <TD><button id="03" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>3</BIG></button></TD>
                        <TD><button id="04" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>4</BIG></button></TD>
                        <TD><button id="05" onClick="reply_click(this.id);ManualColorBlue(this)" ondblclick="ManualColorBACK(this)"><BIG>5</BIG></button></TD>
                        <TD><button id="06" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>6</BIG></button></TD>
                        <TD><button id="07" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>7</BIG></button></TD>
                        <TD><button id="08" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>8</BIG></button></TD>
                        <TD><button id="09" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>9</BIG></button></TD>
                        <TD><button id="10" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>10</BIG></button></TD>
                        <TD><button id="11" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>11</BIG></button></TD>
                        <TD><button id="12" onClick="reply_click(this.id);ManualColorBlue(this);" ondblclick="ManualColorBACK(this)"><BIG>12</BIG></button></TD>
                    </TR>
                </TABLE>
                <!-- end numbers table -->
            </TD></TR>
        </TABLE>
    </FORM>
</BODY>
</HTML>

关键修改说明 #

1. 全局数组定义：把myARR放在函数外部，确保所有点击记录都能被持久保存，不会每次点击都重置
2. DOM元素补充：给「Prior Number」和「已点击总数」添加了带id的span，让JS能找到并更新内容
3. 数组操作逻辑：
   • 每次点击先把当前ID推入数组
   • 「Prior Number」取数组的倒数第二个元素（当数组长度≥2时）
   • 「已点击总数」直接用数组的length属性获取
4. HTML结构修正：把错误的<TD button id="xxx">改成正确的<TD><button id="xxx">结构，符合HTML规范
5. 移除冗余依赖：删掉了两个冲突的jQuery引入，用原生JS实现所有功能，避免版本冲突问题

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