Hide field and change button text

Question

Guys I understand the BASICS of javascript, my area is PHP. Anyway, when you click the button an input appears, how can I do for when you click the button again this input disappear, and the button change text?

I clicked the first time >> Appeared input >> the value of the button changes

I clicked the second time >> Lost input >> the value of the button back to the pattern

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

Answer 1

Just check the style display is none, working example:

example:

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";
    }


}

Answer 2

The following code is self-explanatory.

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>