如何在Blogger中添加JavaScript？复选框控制文本显隐失效求助

问题根源分析 #

1. DOM加载顺序错误：脚本放在<head>中执行时，页面DOM尚未完全渲染，getElementById无法找到目标元素，导致函数执行报错。
2. CDATA语法异常：//<![CDATA[function mostrar(){ 的写法会导致解析器无法正确识别函数定义，引发语法问题。
3. Label关联错误：<label>的for属性值为newsletter-input，与复选框的id="casilla"不匹配，点击标签无法触发复选框状态变化。
4. 初始状态未设置：默认情况下文本容器未隐藏，不符合“未勾选时隐藏”的需求。

修复后的完整代码 #

HTML部分

<div class="required checkbox">
     <div class="checker" id="uniform-customer_privacy">
        <input type="checkbox" value="0" id="casilla" required name="customer_privacy" autocomplete="off">
        <label for="casilla"><a href="https://portugaletearkunautak.blogspot.com/p/proteccion-de-datos.html">Acepto política de Privacidad y Protección de Datos</a></label>
     </div>
</div>
  
&nbsp;</span></p><p><br/></p>

<div id="texto" style="display: none;">
  <p><span style="font-size: large;">Poniéndote en contacto con nosotros aceptas la política de privacidad y protección de datos.</span></p>
</div>

JavaScript部分（建议放在</body>标签前）

<script type='text/javascript'> 
//<![CDATA[
function mostrar(){
  const checkBox = document.getElementById("casilla");
  const text = document.getElementById("texto");

  text.style.display = checkBox.checked ? "block" : "none";
}

// 确保DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const checkbox = document.getElementById('casilla');
  checkbox.addEventListener('change', mostrar);
});
//]]>
</script>

修复说明 #

• 修正<label>的for属性，使其与复选框id匹配，保证标签点击能同步触发复选框状态。
• 给文本容器添加style="display: none;"，默认隐藏文本，符合初始需求。
• 使用DOMContentLoaded事件确保DOM渲染完成后再执行脚本，避免元素查找失败。
• 替换内联onclick为addEventListener，遵循现代JavaScript开发规范，避免全局函数污染。
• 简化条件判断逻辑，代码更简洁易读。

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