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 functionCuando 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.
Ernesto 12 septiembre, 2021
Gracias!