如何在blogger中添加javascript？

Question

我试图创建一个复选框，单击它时显示（使其可见）文本，取消单击时它隐藏文本，但 JavaScript 不起作用，不知道我是否正确。 HTML 代码是（带有 id="acepto" 的 div 是应该隐藏和显示的）：

<div class="required checkbox">
     <div class="checker" id="uniform-customer_privacy">
        <input type="checkbox" value="0" id="casilla" required  name="customer_privacy" autocomplete="off" onclick="mostrar()">
        <label for="newsletter-input"><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">
  <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>

我已将这段脚本插入主题（主题 > 编辑 HTML），但它不起作用：

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

  if (checkBox.checked){
text.style.display = "block";
  } else {
    text.style.display = "none";
  }
  }
  //]]>
</script>

非常感谢您的帮助，提前致谢。

Answer 1

您的 HTML 中存在多个错误，还使用了不需要的 span 元素。请参阅此处的代码。应该有帮助！

const checkbox = document.getElementById("casilla");
const text = document.getElementById("texto");

checkbox.addEventListener('change', monstrar);

function monstrar() {
    if (checkbox.checked){ 
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

<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="newsletter-input">
      <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>

<br />

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