Principalmente, la mayor parte de las aplicaciones mas complejas, deben acceder al valor de alguna variable, para ello dedemos escribir dentro de los parentesis de la función las variables que se van a recibir, esto en Javascript recibe el nombre de “Argumentos”.

function mostrar(valorrecibido){
	...
}

Creamos ahora tres botones, cada uno de ellos llama a la misma función, pero con diferentes argumentos, 1,2 y 3, de forma que al pulsar en uno de ellos, se ejecutará la misma función pero cada uno de ellos indica un parámetro diferente, creamos tres elementos <div> con contenido y le aplicamos un “style:none” para ocultarlos.

<input type="button" onclick="javascript:mostrar(1)" value="Mostrar el div 1">
<input type="button" onclick="javascript:mostrar(2)" value="Mostrar el div 2">
<input type="button" onclick="javascript:mostrar(3)" value="Mostrar el div 3">
<div id="elemento1" style="display:none">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
</div>
<div id="elemento2" style="display:none">
	Aenean commodo ligula eget dolor. Aenean massa.Cum sociis ...
</div>
<div id="elemento3" style="display:none">
	Nulla consequat massa quis enim. Donec pede justo, fringilla ...
</div>

Lo que vamos a hacer es una función que muestre cada uno de los elementos <div> al pulsar sobre un botón y que cada botón muestre un solo contenido, mientras los demás no se muestren, para ello vamos a utilizar un bucle for, primero declaramos la variable que recorrerá el bucle (h=1), luego la condicion a cumpir (h menor o igual que tres), por ultimo el incremento que realizará, en esta caso será de uno en uno (h++).

function mostrar(valorrecibido){
	for(h=1;h<=3;h++){

Luego declaramos la variable “contenidoDestino”, que será igual a elemento + h, es decir h tomará el valor de 1, 2 o 3

var contenidoDestino = document.getElementById("elemento"+h);

Creamos un bucle y le indicamos que si h es igual al valor que recibe el argumento (1, 2 o 3) se visualice.

if(h == valorrecibido){
				contenidoDestino.style.display="block";
			}

Ahora creamos un else para que no se visualice en caso de que h no sea igual al valor que recibe el argumento.

else{
				contenidoDestino.style.display="none";
			}
		}
	} // end for
} // end function

Cuando pulsemos en un botón, este ejecuta la función, la función recibe un argumento que se convierte en “elemento” más el número que hemos asignado como parametro a cada botón, es decir elemento1, elemento2, elemento3, que son los identificadores de los elementos <div> luego se comprueba si el valor que se ha recibido es igual a alguna variable de las que recorremos con el bucle, si es así se muestra el <div>, si no se ocultan.

Este es el resultado




El codigo completo

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Didesweb, llamar a una función con argumentos</title>
</head>
<body>
	<script>
		function mostrar(valorrecibido){
			for(h=1;h<=3;h++){
				var contenidoDestino=document.getElementById("element"+h);
				if(h==valorrecibido){
					contenidoDestino.style.display="block";
				}else{
					contenidoDestino.style.display="none";
				}
			}
		}
	</script>
	<input type="button" onclick="javascript:mostrar(1)" value="Mostrar el div 1">
	<input type="button" onclick="javascript:mostrar(2)" value="Mostrar el div 2">
	<input type="button" onclick="javascript:mostrar(3)" value="Mostrar el div 3">
	<div id="element1" style="display:none">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...
	</div>
	<div id="element2" style="display:none">
		Aenean commodo ligula eget dolor. Aenean massa.Cum sociis ...
	</div>
	<div id="element3" style="display:none">
		Nulla consequat massa quis enim. Donec pede justo, fringilla ...
	</div>	
</body>
</html>

Puedes ver y descargar el código de este archivo en mi cuenta de GitHub.

Valoraciones


1 valoración

  • Ernesto 12 septiembre, 2021

    Gracias!

Tu valoración


* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies