JavaScript报错TypeError: codeBlock is null，求排查解决（附代码）

核心错误原因 #

writecode函数中使用的选择器div.code-block>pre>code与实际HTML结构不匹配——你的HTML里.code-block下直接是<code>标签，没有嵌套<pre>，导致无法找到目标元素，触发codeBlock is null错误。

完整修复方案 #

1. 修正元素选择器 #

修改writecode函数中的选择器，匹配实际HTML结构：

// 原错误代码
let codeBlock = document.querySelector("div.code-block>pre>code");
// 修正后
let codeBlock = document.querySelector("div.code-block>code");

2. 修复命令生成的语法错误 #

原命令模板存在HTML标签冗余、变量语法错误、终端命令逻辑错误，修正后的模板如下：

let lines = `curl -sS ${inputURL} | gpg --dearmor | sudo tee /usr/share/keyrings/${softwareName}.gpg > /dev/null
echo "deb [signed-by=/usr/share/keyrings/${softwareName}.gpg] ${inputURL.replace('/key.gpg', '')} stable main" | sudo tee /etc/apt/sources.list.d/${softwareName}.list`;

• 移除多余的<span>标签，确保生成纯终端可执行命令
• 修正{softwareName}为${softwareName}的变量插值语法
• 第二行添加echo命令，正确生成sources.list条目（原代码直接写deb会导致终端语法错误）
• 添加> /dev/null避免curl命令输出干扰终端
• 新增URL替换逻辑，适配常见的密钥URL格式（自动移除/key.gpg后缀）

3. 修复复制功能的变量未定义问题 #

copyCode函数中copytext变量被注释，导致无法获取命令内容，恢复该变量定义：

// 恢复注释的变量定义
let copytext = code.innerText;

修正后的完整代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>apt-key 替代工具</title>
 <link rel="stylesheet" href="style.css">
 <script src="script.js" defer></script>
</head>
<body>
 <header>
 <p class="h2">
        apt-key 已废弃 <br>
        请使用 trusted.gpg.d 管理密钥环文件
 </p>
 </header>

<div class="tool">
 <form class="apt-key-deprecated">
 <label> 输入软件名称 </label><br>
 <input type="text" name="name" required> <br> 
 <label> 输入仓库密钥URL </label> <br>
 <input type="text" name="url" id="url" required>
 <br>
 <button class="submit" onclick="showCommand(event)">生成命令</button>
 </form>
 <div class="message">
            复制以下命令到终端执行 <br>
 <button class="copy-button" onclick="copyCode()">复制命令</button> <br>
 <div class="code-block">
 <code></code>
 </div>
 </div>
 </div>
</body>
</html>

（注：修正拼写错误deperecated为deprecated，添加required属性确保用户输入必要内容）

CSS代码

p.h2 {
 color: rgb(236, 123, 170);
 font-size: 2.4rem;
 text-align: center;
}

.tool {
 margin: 5rem 20vw 4rem 20vw;
}

form>label{
 margin-top: 0.7rem;
 margin-bottom: 0.7rem;
 display: block;
}

form>input{
 margin-top: 0.7rem ;
 margin-bottom: 0.7rem;
 width: 100%;
 padding: 0.5rem;
 box-sizing: border-box;
}
.submit {
 background-color: rgb(32, 206, 32);
 margin-top: 1.2rem;
 padding: 0.5rem 1.5rem;
 border: none;
 cursor: pointer;
}

.message {
 visibility: hidden;
 margin-top: 5rem;
}

.code-block {
 border: solid 2px red;
 text-align: left;
 padding: 1rem;
 margin-top: 1rem;
}

code {
 width: fit-content;
 white-space: pre-wrap;
 word-wrap: break-word;
 color: lightgreen;
 background-color: rgb(70, 62, 62);
 display: block;
 padding: 1rem;
}

.copy-button {
 margin-top: 1rem;
 margin-bottom: 1rem;
 padding: 0.5rem 1.5rem;
 border: none;
 cursor: pointer;
}

（注：优化表单元素布局，添加响应式样式，提升移动端使用体验）

JavaScript代码

let showCommand = (event) => {
 event.preventDefault();
 console.log("开始生成命令");
 writecode();
 const myDiv = document.querySelector('.message');
 myDiv.style.visibility = "visible";
};

let writecode = () => {
 console.log("写入命令内容");
 const codeBlock = document.querySelector("div.code-block>code");
 const softwareName = document.querySelector('input[name="name"]').value.trim();
 const inputURL = document.querySelector("#url").value.trim();

 // 修正后的命令模板
 const lines = `curl -sS ${inputURL} | gpg --dearmor | sudo tee /usr/share/keyrings/${softwareName}.gpg > /dev/null
echo "deb [signed-by=/usr/share/keyrings/${softwareName}.gpg] ${inputURL.replace('/key.gpg', '')} stable main" | sudo tee /etc/apt/sources.list.d/${softwareName}.list`;

 codeBlock.textContent = lines;
};

function copyCode() {
 const codeBlock = document.querySelector('.code-block');
 const code = codeBlock.querySelector('code');
 const copytext = code.innerText;

 navigator.clipboard.writeText(copytext)
        .then(() => {
 alert('命令已复制到剪贴板！');
        })
        .catch((error) => {
 console.error('复制失败:', error);
 alert('复制失败，请手动复制');
        });
};

（注：使用textContent替代innerHTML避免HTML注入风险，添加.trim()处理用户输入空格，优化复制失败的提示逻辑）

内容的提问来源于stack exchange，提问作者Atul Anand Oraon