visibility:Visible in div javascript

Question

I have the following div that this hidden:

  <div class="card" id="cnpj_erro" style="visibility:hidden">
       <div class="body">
            <div class="header bg-red">
                <h2>
                    CNPJ inválido <small>Confira os números</small>
                </h2>
            </div>
       </div>
  </div>

And the function:

<script>
        function verificarValidacaoCNPJ() {
            debugger;
            var valCNPJ = !document.getElementById("txCNPJ_cad_emp") ? "" : document.getElementById("txCNPJ_cad_emp").value;
            if (!validarCNPJ(valCNPJ)) {
                document.getElementById('cnpj_erro').setAttribute('style', 'visibility:visible');
            }
            else {
                document.getElementById('cnpj_erro').setAttribute('style', 'visibility:hidden');
            }
        }
    </script>

It is validating right, no problem, but I am not able to change the attribute 'style', 'visibility' so that it is displayed or hidden. Debugging when it enters the option document.getElementById('cnpj_erro').setAttribute('style', 'visibility:visible');

returns Return value: undefined

Answer 1

As stated in the comments, for you to change an element style property, just do:

document.getElementById('cnpj_erro').style.visibility = "visible";

Take the example:

var visible = false;

function toggle() {
  if (!visible) {
    document.getElementById('cnpj_erro').style.visibility = 'visible';
    visible = true;
  } else {
    document.getElementById('cnpj_erro').style.visibility = 'hidden';
    visible = false;
  }
}

<div class="card" id="cnpj_erro" style="visibility:hidden">
  <div class="body">
    <div class="header bg-red">
      <h2>
        CNPJ inválido <small>Confira os números</small>
      </h2>
    </div>
  </div>
</div>

<button onclick="toggle()">Click</button>

If you tried to do it and it didn’t work, you must have done it wrong.