Html - How to add Javascript in Blogger?

JavierArambarriCalvo
October 21, 2023
104 views
1 vote
2 Answers

I’m trying to make a checkbox which, when clicked, shows (make visible) a text, and when unclicked hides a text, but the JavaScript doesn’t work and I don’t know if I’m correct or not. The HTML code is (div with id="acepto" is the one that should be hidden and shown):

<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>

I’ve inserted this piece of script in the <HEAD> of the theme (Theme > Edit HTML), but it doesn’t work:

<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>

I really appreciate your help, thanks in advance.

Answers

There were several errors in your HTML, also using unneeded span elements. See the code here. Should help!

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>

You may not add // (double slash) in your code cause that will make comment text after it. a sample is given here and my case it worked.

 <script type='text/javascript'>
      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>

<div class="required checkbox">
      <div class="checker" id="uniform-customer_privacy">
         <input type="checkbox" value="0" id="casilla" required name="customer_privacy" autocomplete="off"
            onchange="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>

   <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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to add Javascript in Blogger?

Answers