JavaScript - Poner un nesaje en el DOM

 
Vista:
sin imagen de perfil
Val: 10
Ha aumentado su posición en 9 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Poner un nesaje en el DOM

Publicado por DEVILSITO (8 intervenciones) el 08/04/2023 05:56:22
Con javascript sumo dos numeros de dos columnas contiguas (table HTML) y el resultado va en una tercera. Esto funciona perfectamente y se efectua registro por registro (o fila o fila).
He intentato de varias formas que cuando el proceso comience, colocar en el DOM el mensaje "Espere..", y que cuando finalice dicho proceso, este mensaje desaparezca.
A lo que mas he llegado es que el mensaje lo muestra cuando termina.
Alguna sugerencia? esto aparentemente es sencillo pero algo no estoy considerando.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Poner un nesaje en el DOM

Publicado por Alejandro (532 intervenciones) el 10/04/2023 18:00:12
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Lo mas sencillo es tener el mensaje ya hecho y solo mostrarlo y ocultarlo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
	body{
		margin:0px;
	}
	#loading{
		display:none;
		position:absolute;
		width:100%;
		height:100%;
		background:rgba(0, 0, 0, .5);
		color:white;
		font-weight:bold;
	}
</style>
 
<div id="loading">
	<div>ESPERE...</div>
</div>
<button type="button" id="cmdStart">Iniciar</button>
 
<script>
	var proceso;
	var ciclos;
	document.getElementById('cmdStart').addEventListener('click', function(){
		document.getElementById('loading').style.display = 'grid';
		ciclos = 0;
		proceso = setInterval(procesando, 1000);
	});
 
	function procesando(){
		ciclos++;
		console.log(ciclos);
		if(ciclos==5){
			clearInterval(proceso);
			document.getElementById('loading').style.display = 'none';
		}
	}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar