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>
No hay comentarios:
Publicar un comentario