Imprimir Página - Obtener valor de <select> en javascript

Título: Obtener valor de <select> en javascript
Publicado por: Geek7 en 23 Diciembre 2012, 11:20 am

Tengo este codigo pero no me anda. Me dice en la consola "Cannot read property 'value' of null ".

Código

<!DOCTYPE html>
<html>
<head>
	<title>Convertidor</title>
<style type="text/css">
body {
width: 300px;	
font-family: Helvetica;
text-align: center;
}
input {
border: 3px dashed #000080;
}
input:hover {
background-color: #FFFF00;
color: #000080;	
}
#grados {
display: block;
padding: 0 0 8px 0;
color: #C00;
}
</style>
 
<script type="text/javascript" >
var grados = document.getElementById("grados");
var conv = document.getElementById("opcion");
 
function switchLetter() {
if (conv.options[conv.selectedIndex].value == 0) { // Aqui algo anda mal!!
	grados.innerHTML = "C";
} else {
	grados.innerHTML = "F";
	}
}
</script>
</head>
 
<body>
<form action="ex2.php" method="post"><fieldset><legend>Convertidor</legend>
<input type="text" name="grados" size="4" /> <sup>o</sup><div id="grados"></div>
Convert from <select id="opcion" onchange="switchLetter()">
<option value="0">Celsius a Fahr</option>
<option value="1">Fahr a Celsius</option>
</select></fieldset>
</form>
</body></html>

Título: Re: Obtener valor de <select> en javascript
Publicado por: #!drvy en 26 Diciembre 2012, 17:21 pm

Buenas,

Tu error es que ejecutas el javascript antes de que se haya cargado el DOM por completo.

Asi, var grados = document.getElementById("grados"), intenta obtener un objeto inexistente porque todavía no se ha cargado.

2 soluciones:

1. Obtener las variables dentro de la propia funcion.

Código

<script type="text/javascript">
var switchLetter = function() {
   var grados = document.getElementById("grados");
   var conv = document.getElementById("opcion");
 
   if (conv.options[conv.selectedIndex].value == 0) { // Aqui algo anda mal!!
      grados.innerHTML = "C";
   } else {
      grados.innerHTML = "F";
   }
}
</script>

2. Declarar la función (el script entero) antes de </body>. De esta manera, primero se cargaran los elementos y luego el script.

Saludos

Título: Re: Obtener valor de <select> en javascript
Publicado por: Draco Heroicus en 28 Diciembre 2012, 09:27 am

Con jQuery

Código:

var valor =  $("#id_select").val();

Título: Re: Obtener valor de <select> en javascript
Publicado por: Draco Heroicus en 28 Diciembre 2012, 09:29 am

para detectar el cambio

Código:

$("#opcion").change(function(){
    //Lo que pasa al haber un cambio
   var seleccionado = $(this).val;
});

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Geek7 en 23 Diciembre 2012, 11:20 am