Utilizar el evento “onClick” para hacer uso de una función en Javascript

 

onclick: evento que se produce cuando se pincha con el ratón sobre un elemento. Normalmente se utiliza con cualquiera de los tipos de botones que permite definir XHTML (<input type="button">, <input type="submit">, <input type="image">).

Ejemplo de un elemento Button de formulario

 

<input type="button" value="presiona" onClick="exemple_prompt();"></input>

El botón creado por el formulario se muestra así.

                           Al presionar el usuario se realiza el evento onClick- que tiene asignada una función. Esta función puede estar en el mismo documento o puede estar en un documento a parte con la extensión JS para ser llamado mediante una línea de código en la zona de etiquetas de la cabecera.

<script type="text/javascript" language="javascript" src="Javascript/funciones.js"></script>

Este documento lo iniciaremos con una función que vamos a llamar  exemple_prompt().

/*Definició de una funció  con un prompt
function exemple_prompt()
{
variable=prompt("escriu el que volguis","");
alert('El text que has escrit es:\n'+ variable);
return (variable);                                                                    
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Controles</title>
<script type="text/javascript" language="javascript" src="Javascript/funciones.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
Ejemplo de llamada de función des de un Button
<input type="button" name="presiona" id="presiona" value="presiona" onclick="exemple_prompt()" />
</form>
</body>
</html>

Tratamiento del elemento Text del formulario desde  Javascritp

Uno de los elementos más usados a la hora de implementar un formulario son las cajas de texto. Estas se definen en HTML mediante la etiqueta:
<INPUT TYPE = " text " NAME = " nombre " VALUE = " valor_por_defecto " SIZE= " tamaño_por_defecto">
El elemento TEXT introduce una caja para que el usuario introduzca un texto, texto que será visible por el mismo en todo momento, el elemento es análogo a este, pero se diferencia en que está concebido para que en él se introduzcan contraseñas, por lo que cuando el usuario escribe algo en su interior este texto se va almacenando dentro, pero en pantalla sólo se muestran asteriscos, ****, por motivos de seguridad. Por último, el elemento HIDDEN es también igual que el TEXT, pero en este caso no aparece en pantalla ni la caja ni su contenido, y el usuario no puede escribir nada en su interior (pero nosotros sí, por defecto o mediante JavaScript). Vamos a explicar las propiedades y métodos de estos tres elementos análogos mediante las del objeto TEXT, teniendo siempre presente que lo que digamos es extensible a los tres.

/*Definición de una función que canvia el valor de value de un input de tipus text*/

function exemple_canvi()

{

cadena_nova=exemple_prompt();

alert('arribem fins aqui');

document.formulari.camptext.value=cadena_nova;

}

 

<input type="text" maxlength="20" size="20" value="valor inicial" id="camptext" name="camptext" > Fixat en que passa al presionar el boto</input>                 

Ejercicios para el control de funciones con “Button” i “text” de formulario