开发电子表格编辑器时如何修改编辑状态下表格单元格的字体大小

• 核心错误：HTML规范要求同一页面内id属性必须唯一，你给多个可编辑单元格设置了相同的textarea id，导致document.getElementById永远只能匹配到第一个td，无法对当前正在编辑的单元格生效
• 逻辑缺失：没有记录当前用户正在编辑的单元格对象，字号调整没有明确的目标元素

新增激活单元格记录逻辑，点击哪个单元格编辑就将该单元格标记为激活状态，调整字号时直接修改激活单元格的样式即可，修改后完整代码如下：

<title>Gold Sheets</title>
<div id="toolbar">
    <select name='Font Size' id="ft_size" onchange="changeSize(this);">
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="16" selected>16</option>
        <option value="18">18</option>
        <option value="24">24</option>
    </select>
</div>
<script>
// 存储当前处于编辑状态的单元格
let activeCell = null;

function changeSize(e) {
    if(activeCell) {
        activeCell.style.fontSize = e.value + 'px'
    }
}

// 页面加载完成后绑定所有可编辑单元格的聚焦事件
window.onload = function() {
    const editableCells = document.querySelectorAll('td[contenteditable]');
    editableCells.forEach(cell => {
        cell.addEventListener('focus', function() {
            activeCell = this;
        })
    })
}
</script>
<br>
<br>
<table>
    <tr>
        <td>1</td>
        <td contenteditable></td>
        <td contenteditable></td>
        <td contenteditable></td>
    </tr>
</table>

1. 移除了所有单元格重复的textarea id，避免id冲突问题
2. 新增全局变量activeCell存储当前正在编辑的单元格
3. 给所有可编辑单元格绑定聚焦事件，单元格被点击进入编辑状态时自动更新activeCell为当前单元格
4. 调整changeSize方法的逻辑，仅修改当前激活单元格的字号

注意：后续如果要新增更多可编辑单元格，不需要额外修改JS逻辑，只要给td加上contenteditable属性就会自动适配字号调整功能

内容的提问来源于stack exchange，提问作者呂殿下-Luidenka