创建code元素追加至.codeblockDiv后未生成code标签的问题

核心问题定位 #

• 功能失效的直接原因是newCodeblock函数的DOM挂载逻辑存在引用错误，触发JS运行时异常，直接中断后续执行流程
• 具体错误点：函数内已经通过document.createElement('code')创建了目标代码块实例，存放在变量z中，但在将元素挂载到页面容器时，错误引用了当前作用域未定义的变量x

  变量x是editCode函数内部的局部变量，仅在编辑功能的回调执行作用域内有效，全局环境无法读取该值，触发ReferenceError错误，导致新建的code元素根本没有机会插入页面

附带逻辑问题 #

• 原有boldText函数的快捷键判断逻辑永远无法触发：单次键盘按键事件的keyCode属性只会返回单个按键的编码值，不可能同时匹配17（Ctrl键编码）和66（B键编码）

修正方案 #

1. 修正newCodeblock函数的DOM挂载逻辑，将原本错误引用的x替换为实际创建的z变量：

   function newCodeblock() {
     const z = document.createElement('code'); 
     const h = document.createElement('button');
     z.className = "codeblock";
     z.innerHTML = "Write Here"
     z.setAttribute("contenteditable", "true");
   
     h.innerHTML = "Save";
     h.addEventListener('click', function() {
       z.setAttribute("contenteditable", "false");
       h.remove();
     })
     // 正确挂载创建的按钮和代码块元素到目标容器
     document.querySelector('.codeblockDiv').appendChild(h);
     document.querySelector('.codeblockDiv').appendChild(z);
   }
   

2. 调整Ctrl+B加粗的快捷键判断逻辑，需要维护全局按键按下状态，才能正确检测组合键触发：

   // 记录当前处于按下状态的按键编码
   const pressedKeys = new Set();
   document.addEventListener('keydown', (e) => {
     pressedKeys.add(e.keyCode);
     // 同时检测Ctrl和B键按下状态
     if (pressedKeys.has(17) && pressedKeys.has(66)) {
       const targetCodeBlock = document.querySelector('.codeblock');
       targetCodeBlock.style.fontWeight = 'bold';
     }
   })
   document.addEventListener('keyup', (e) => {
     pressedKeys.delete(e.keyCode);
   })
   

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