如果在运行代码时显示“未找到合同信息标签”，这可能是因为选择器没有正确匹配到页面上的元素。以下是一些排查和解决的方法：
1. 检查选择器
确保您使用的选择器 label.contract-info 确实存在于 HTML 中。可以尝试用浏览器的开发者工具（通常按 F12 打开）检查元素，确认标签是否具有该类名。
<label class="contract-info">合同信息</label>
2. 使用更宽松的选择器
如果可能有多个类或者 ID，可以试着用其他方法来选择，例如只用 label 标签，或增加一个更具体的上下文：
const contractLabel = document.querySelector('label'); // 更宽松的选择
3. DOM 加载顺序问题
确保您的 JavaScript 在 DOM 完全加载后执行。如果您的脚本是在 <head> 中，考虑将它移动到 <body> 的底部，或者使用 DOMContentLoaded 事件：
document.addEventListener("DOMContentLoaded", function() {
const contractLabel = document.querySelector('label.contract-info');
if (contractLabel) {
// 创建按钮容器
const buttonContainer = document.createElement('div');
buttonContainer.innerHTML = `
<div class="button-container">
<button class="btn" data-action="action1">按钮1</button>
<button class="btn" data-action="action2">按钮2</button>
<button class="btn" data-action="action3">按钮3</button>
<button class="btn" data-action="action4">按钮4</button>
</div>
`;
// 将按钮容器插入到合同部分（label 上面）
contractLabel.parentNode.insertBefore(buttonContainer, contractLabel);
// 添加点击事件处理函数
buttonContainer.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
switch (action) {
case 'action1':
console.log('按钮1被点击');
break;
case 'action2':
console.log('按钮2被点击');
break;
case 'action3':
console.log('按钮3被点击');
break;
case 'action4':
console.log('按钮4被点击');
break;
default:
break;
}
});
});
} else {
console.log('未找到合同信息标签');
}
});
4. 输出调试信息
在您运行的 JavaScript 中加入一些调试输出，以帮助确定问题所在。例如：
console.log(document.body.innerHTML); // 查看整个 body 的内容
这会打印出整个页面的 HTML 内容，可以帮助你检查所需标签是否存在。
总结
以上步骤应该能帮助您找出为什么无法找到目标元素的问题。如果仍然无法解决，请提供相关 HTML 结构以便进一步分析。
内容由零声教学AI助手提供，问题来源于学员提问
