jueves, 28 de agosto de 2014

Tutorial Javascript parte 18 - getElementsByName()




En esta parte del tutorial veremos como utilizar el método getElementsByName() que nos permitirá acceder a los elementos del DOM HTML a través del valor asignado al atributo name.

Es interesante saber que este método no regresa un sólo valor, realmente se trata de un array y para poder acceder a cada elemento indivualmente hay que hacerlo de forma indexada.

El código del ejemplo del capítulo ...


<!DOCTYPE HTML>
<html>
<head>

<script>
window.onload = function()
     {
	  var campo = document.getElementsByName("campo");
	  //alert(campo.length);
	  var btn_1 = document.getElementById("btn-1");
	  btn_1.onclick = function()
	    {
		 alert(campo[0].value);
		 campo[0].style.height = "30px";
		}
	  var btn_2 = document.getElementById("btn-2");
	  btn_2.onclick = function()
	    {
		 alert(campo[1].value);
		}
		
	  var campo3 = document.formulario.campo3;
	  alert(campo3.value);
	 }
</script>

</head>
<body>
<form method="POST" name="formulario">
Campo de texto 1: <input type="text" name="campo">
Campo de texto 2: <input type="text" name="campo">
Campo de texto 3: <input type="text" name="campo3" value="CAMPO 3">
<button type="button" id="btn-1">Obtener valor del campo 1</button>
<button type="button" id="btn-2">Obtener valor del campo 2</button>
</form>
</body>
</html>