Function of javaScrip does not work the second time I click

Question

Function of javaScrip does not work the second time I click

Navigation

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

3

I'm starting in web development, but I have a small inconvenience, I have a small scrip that returns the system date by clicking on a button but by erasing the data from the text box where it rests and click a second time to return to bring the date this does not work anymore.

They could help me or give me advice

Thanks.

function obtenerFecha()
 {
var fecha = "";
var calendario = new Date();
var dia = calendario.getDate();
var mes = calendario.getMonth()+1;
var ano = calendario.getFullYear();
fecha = dia+"/"+mes+"/"+ano;
document.mifor.algo.defaultValue = fecha;	
fecha = "";
}

body {
text-align: center;
height: 100%;
background: #FFFFFF
}
.selector
{
	font-size: 20px;
	border-radius: 15px;
}
.fecha
{
	border-radius: 15px;
	font-size: 20px;
	align-content: center;
	text-align: center;
}

.cont
{
	background:#fff125;
	height: 15vh;
}
.label
{
	font-size: 20px;
}

<!DOCTYPE html>
<html>
	<head>
		 <link rel="stylesheet" type="text/css" href="estilo.css"> 
	<script type="text/javascript" src="scrips.js"></script>
		<title>
			Prueba formulario
		</title>
	</head>
	
	<body >
	
		<form name="mifor" action="mailto:[email protected]" enctype="text/plain">

			<label for="algo" class="label">Fecha</label>
			<input type="text" name="algo" id="algo" value="" class="fecha">
			 <button type="button" onclick="obtenerFecha()">Obtener Fecha</button>
			 
			 <br>
			 <br>
			 <label for = "agente" class="label">Atendio</label>
			 <select id="agente" name = "agente" class="selector">
			 	<label for = "agente" class="label">Atendio</label>
			 	<option value="Alberto Loera">Alberto Loera</option>
			 	<option value="Rafael Nario">Rafael Nario</option>
			 	<option value="Victor Boon">Victor Boon</option>
			 </select>
		</form>
		
	</body>
</html>

javascript html

asked by Alberto Loera 29.06.2018 в 12:29

source

2 answers

Commit tran in SQL Convert a string from an array to an array type in PHP

score 1 · Answer 1

Instead of using defaultValue, use the value attribute of the input.

//Añadimos el evento.
document.getElementById('getFecha').addEventListener('click', () => {
    var fecha = "";
  var calendario = new Date();
  var dia = calendario.getDate();
  var mes = calendario.getMonth()+1;
  var ano = calendario.getFullYear();
  fecha = dia+"/"+mes+"/"+ano;
//Asigar al input el valor de la fecha
document.getElementById('algo').value = fecha

})

Example:

document.getElementById('getFecha').addEventListener('click', () => {
 	var fecha = "";
  var calendario = new Date();
  var dia = calendario.getDate();
  var mes = calendario.getMonth()+1;
  var ano = calendario.getFullYear();
  fecha = dia+"/"+mes+"/"+ano;
document.getElementById('algo').value = fecha

})

body {
text-align: center;
height: 100%;
background: #FFFFFF
}
.selector
{
	font-size: 20px;
	border-radius: 15px;
}
.fecha
{
	border-radius: 15px;
	font-size: 20px;
	align-content: center;
	text-align: center;
}

.cont
{
	background:#fff125;
	height: 15vh;
}
.label
{
	font-size: 20px;
}

<!DOCTYPE html>
<html>
	<head>
		 <link rel="stylesheet" type="text/css" href="estilo.css"> 
		<title>
			Prueba formulario
		</title>
	</head>
	
	<body >
	

		<form name="mifor" action="mailto:[email protected]" enctype="text/plain">

			<label for="algo" class="label">Fecha</label>
			<input type="text" name="algo" id="algo" value="" class="fecha">
			 <button type="button" id="getFecha" >Obtener Fecha</button>
			 
			 <br>
			 <br>
			 <label for = "agente" class="label">Atendio</label>
			 <select id="agente" name = "agente" class="selector">
			 	<label for = "agente" class="label">Atendio</label>
			 	<option value="Alberto Loera">Alberto Loera</option>
			 	<option value="Rafael Nario">Rafael Nario</option>
			 	<option value="Victor Boon">Victor Boon</option>
			 </select>
		</form>
		  <script>

</script>
	</body>
</html>

score 1 · Answer 2

When an input has no value and has just been generated, it takes the default value, which is usually "" (empty string).

Therefore, when executing your function, the default value is changed, and as long as you do not touch the input that will be the displayed value.

You can do the test of putting a value manually when loading the page and then pressing the button, you will see that it does not do anything either because the default value is not the one that is being shown, it has already been given another value.

The solution is to modify the value field instead of defaultValue :

function obtenerFecha() {

  const calendario = new Date();
  const dia = calendario.getDate();
  const mes = calendario.getMonth()+1;
  const ano = calendario.getFullYear();
  const fecha = dia+"/"+mes+"/"+ano;

  document.getElementById('algo').value = fecha;    

}