Hide field and change button text

Question

Hide field and change button text

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Galera I understand the basics of BASICS from javascript, my area is PHP. Anyway, when the button is clicked, an input appears, how can I do when I click the button again, this input disappears, and the button changes text?

I clicked the first time > > Input > > the value of the button changes

I clicked the second time > > Input > > the value of the button returns to the default

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

javascript html

asked by anonymous 30.01.2018 / 13:39

2 answers

0

Just check if the style display is none , example working:

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


}

30.01.2018 / 13:45

Generate a new control for each listed item Uncaught Error: Call to undefined function mysqli_connect ()

score 0 · Accepted Answer

The following code is self explanatory, but if you have any questions or are missing something, just say I'll help.

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>