0

Tengo un código que mediante javascript debe llenar un input text a partir de un select y no me esta funcionando.

<!DOCTYPE html>
<html>
<head>
<script text=javascript>
var select = document.getElementById('dropdown');
select.addEventListener('change', function(event) {
  var select = event.target;
  var indiceSeleccionado = select.selectedIndex;
  var elementoSeleccionado = select.options[indiceSeleccionado];
  var texto = document.getElementById('mytext');

  texto.value = select.value;

})
</script>
</head>
<input type="text" id="mytext">

<select id="dropdown" >

  <option value="">None</option>
  <option value="text1">text1</option>
  <option value="text2">text2</option>
  <option value="text3">text3</option>
  <option value="text4">text4</option>
</select>
</body>
</html>
2
  • Y me corre perfecto aqui jsfiddle.net Commented el 22 ago. 2017 a las 22:34
  • 2
    Mueve el script al final del body o ponle un defer. El motivo por el que no te funciona en tu servidor (pero sí en JSFiddle) es porque estás intentando leer elementos que aún no existen en el DOM cuando se ejecuta el script.
    – Alvaro Montoro
    Commented el 22 ago. 2017 a las 22:51

1 respuesta 1

1

Tienes que mover el javascript al final de la pagina para poder lograrlo:

<input type="text" id="mytext">

<select id="dropdown" >

  <option value="">None</option>
  <option value="text1">text1</option>
  <option value="text2">text2</option>
  <option value="text3">text3</option>
  <option value="text4">text4</option>
</select>

<script text=javascript>
var select = document.getElementById('dropdown');
select.addEventListener('change', function(event) {
  var select = event.target;
  var indiceSeleccionado = select.selectedIndex;
  var elementoSeleccionado = select.options[indiceSeleccionado];
  var texto = document.getElementById('mytext');

  texto.value = select.value;

})
</script>

El código de la página se ejecuta a modo de cascada, de arriba hacia abajo según esta se carga. Cuando un código javascript se carga y ejecuta antes que el elemento al que hace referencia este no puede encontrarse, entonces, tu código var select = document.getElementById('dropdown'); se ejecuta antes de que el select se haya renderizado y por eso no lo puede encontrar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.