Obtener valor de <select> en javascript

Iniciado por Geek7, 23 Diciembre 2012, 11:20 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

Geek7

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 (javascript) [Seleccionar]
<!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>

#!drvy

#1
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 (javascript) [Seleccionar]
<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

Draco Heroicus

#2
28 Diciembre 2012, 09:27 AM
Con jQuery
Código [Seleccionar]

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

Draco Heroicus

#3
28 Diciembre 2012, 09:29 AM
para detectar el cambio
Código [Seleccionar]

$("#opcion").change(function(){
    //Lo que pasa al haber un cambio
   var seleccionado = $(this).val;
});
Imprimir
Ir Arriba Páginas1
Acciones del Usuario