0

Galera eu entendo o BÁSICO dos BÁSICOS de javascript, minha área é PHP. Enfim, quando se clica no botão aparece um input, como posso fazer pra quando clicar no botão de novo esse input sumir, e o botão mudar de texto?

Cliquei na primeira vez >> Apareceu input >> o value do botão muda

Cliquei na segunda vez >> Sumiu input >> o value do botão volta ao padrão

<div id="inputprogram"></div>

<input class="button" type="button" onclick='insereInput()' value="Programar Notícia" /></div>

 <script type="text/javascript">
function insereInput()
{document.getElementById('inputprogram').innerHTML = '<tr> <div class="input_field"><div style="margin-left:69px;"><label for="textfild"><b>Postar em</b>:</label><input required="required" type="text" name="postdate" class="smallfield">&nbsp;&nbsp;<input required="required" type="text" name="posthora" size="03"><div style="margin-left:115px;"><i> Dia/Mês/Ano &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hora:Minuto</i></div></div></div> </tr>';}
</script>
2
  • Pode ser apenas pelo lado do usuário no Browser só com CSS?
    – hugocsl
    Commented 30/01/2018 às 13:04
  • Sim, poderia...
    – user89739
    Commented 30/01/2018 às 13:05

2 Respostas 2

0

O seguinte código é explicável por si mesmo mas se tiveres alguma dúvida ou faltar algo é só dizeres que eu ajudo.

function insereInput() {
  if ( document.getElementById('botao').innerHTML == 'Aparecer input' ) {
    // modificar texto do botão:
    document.getElementById('botao').innerHTML = 'Esconder input';
    // ou se usares <input type="button"> em vez do elemento <button> simplesmente muda innerHTML para value
    document.getElementById('inputprogram').innerHTML = '<tr> <div class="input_field"><div style="margin-left:69px;"><label for="textfild"><b>Postar em</b>:</label><input required="required" type="text" name="postdate" class="smallfield">&nbsp;&nbsp;<input required="required" type="text" name="posthora" size="03"><div style="margin-left:115px;"><i> Dia/Mês/Ano &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hora:Minuto</i></div></div></div> </tr>';
  } else {
    // modificar texto do botão de volta para o padrão:
    document.getElementById('botao').innerHTML = 'Aparecer input';
    document.getElementById('inputprogram').innerHTML = '';
  }
}
<button id="botao" onclick="insereInput()">Aparecer input</button>
<div id="inputprogram"></div>

1
  • Perfeito, obrigado!
    – user89739
    Commented 30/01/2018 às 13:49
0

Basta verificares se o estilo display é none, exemplo a funcionar:

exemplo:

function insereInput()
{

var x = document.getElementById("inputprogram");
    if (x.style.display === "none") {
        x.style.display = "block";
        x.innerHTML = '<tr> <div class="input_field"><div style="margin-left:69px;"><label for="textfild"><b>Postar em</b>:</label><input required="required" type="text" name="postdate" class="smallfield">&nbsp;&nbsp;<input required="required" type="text" name="posthora" size="03"><div style="margin-left:115px;"><i> Dia/Mês/Ano &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Hora:Minuto</i></div></div></div> </tr>';
    } else {
        x.style.display = "none";
    }


}
1
  • Funcionou, mas a primeira vez que clico não acontece nada, tenho que clicar duas vezes para funcionar e como faço para o texto do botão mudar? Tipo "Aparecer input", "esconder input"?
    – user89739
    Commented 30/01/2018 às 13:02

Você deve fazer log-in para responder a esta pergunta.