Javascript mostrar formulario ao clicar no botao

[Xandrules]

Boa Tarde, preciso mostrar um formulário quando clicar no botão.

Hoje para mostrar o formulário tenho que clicar duas vezes.

segue o meu código.

 

<input id="show-dateTime" type="button" value="Date/Time Config." onclick="showTime();" />

function showTime() {

	if (document.getElementById("setDateTimeConfig").style.visibility == "hidden") {
		document.getElementById("setDateTimeConfig").style.visibility = "visible";
		document.getElementById("setDateTimeConfig").style.display = '';

	} else {

		document.getElementById("setDateTimeConfig").style.display = 'none';
		document.getElementById("setDateTimeConfig").style.visibility = "hidden";
	}
}

 

[DiF]

@Xandrules Por que não usa o jQuery toggle?   Para mostrar e esconder com apenas um clique e um botão.

[Xandrules]

@DiF obrigado pela sugestão mais o meu problema é que não tenho muito recurso disponível, pois essa interface Web e de um sistema embarcado e eu tenho disponível apenas 1 MB para toda aplicação.

[DiF]

@Xandrules sem problemas, o plugin jQuery pode ser carregado via CDN, sem a necessidade de incluir nos arquivos do seu projeto.

 

Cole essa linha dentro do Header ou no final da página:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 

<input id="show-dateTime" type="button" value="Date/Time Config." onclick="showTime();" />
<div class="form">
    <form>
         <input type="text" name="algo" placeholder="alguma coisa"/> 
          <input type="text" name="algo" placeholder="alguma coisa"/> 
           <input type="text" name="algo" placeholder="alguma coisa"/> 
            <input type="text" name="algo" placeholder="alguma coisa"/> 
            <input  type="button" value="Salvar"/>
            
    </form>
</div>

$("#show-dateTime").on("click", function(){
     $(".form").toggle();
});

Veja funcionando: https://jsfiddle.net/dife/p8ngzk05/2/

 

Simples não?  Não se açoite usando o JS puro...  vai fazer uma volta maior para uma coisa relativamente simples.

Jquery não pesa nada.  Não vejo porque não usar, já que facilita muito

[Xandrules]

@DiF não posso carregar via CDN pois esse sistema embarcado quase sempre e acessado via local.

[DiF]

@Xandrules Ok, então baixe o arquivo jquery.min   que é extremamente pequeno. Não vai ocupar quase nada. apenas 84,8 KB dos seus 1024Kb disponíveis

[Xandrules]

@DiF olha deu certo em partes, porém quando eu dou apply, na segunda vez que abro ja não mostra meu formulário.

a area que antes era ocupada pelo meu form fica vazio.

[navegantenarede]

@Xandrules considerando que você tem pouco recurso disponível, uma forma sem JavaScript seria usando os elements details e summary. Então bastaria estilizar o botão com CSS.

 

Exemplo aqui

[Xandrules]

@navegantenarede vou realizar teste com seu exemplo e venho dar meu feedback.

Obrigado

[makotsunami]

@Xandrules Eu faria igual o @navegantenarede falou. Cria uma classe css que esconde o botão e faz assim

 

div = document.querySelector('mydiv')

div.addEventListener('click', () => {
	div.classList.toggle('minha__classe__css')
})

 

[Xandrules]

@makotsunami @DiF @navegantenarede fiz o seguinte.

<input id="write-button" type="button" value="Date/Time Config." />

<script>
    $(document).ready(function(){
        $("#write-button").click(function(){         
        $("#setDateTimeConfig").toggle();        
      });
    });

</script>

Com o pouco recurso que tinha disponível consegui fazer usando JQuery, eu já usava no código VueJS para criar um servidor de páginas e vi que ja tenho o JQuery no código para usar o NotifyJS então Simplesmente adicionei o código e funcionou.

 

Agradeço o tempo de cada um de vcs em me ajudar muito Obrigado.

 

[DiF]

@Xandrules Só uma nota sobre o click:

 

Citação

 ".click se aplica ao DOM corrente, enquanto o .on (usando delegação) continuará valendo para novos elementos adicionados ao DOM depois da associação do evento."

Sabendo disso, eu aplicaria o on() para futuros eventos no DOM.