0

Tengo unos input que recogen la información ingresada y construye la otra parte del link:

// Variables para la modificación de URL
var data1 = ''
var data2 = ''

// Al usar un tecla y levantarla
$('#data1').keyup(function() {
  // Modificar la URL que se ve
  $('#spanData1').text($('#data1').val())
  // Guardar el dato en la variable correspondiente
  data1 = $('#data1').val();
})

// Hace lo mismo que el anterior pero para el segundo
$('#data2').keyup(function() {
  $('#spanData2').text($('#data2').val())
})

//Al hacer click en el boton ir
$('#ir').click(function() {
  // Crear la URL para la redirección y...
  var url = 'http://ejemplo.com/' + data1 + '/' + data2;
  // Hacer la Redirección en una ventana nueva
  //window.open(url, '_blank');
  console.log(url)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>URL</h1>
  <!-- Esto se modifica visualmente para que el usuario sepa a donde va a    ir. -->
  <h2>http://ejemplo.com/<span id="spanData1"></span>/<span id="spanData2"></span></h2>
  <!-- Estos son los inputs de data. -->
  <input type="text" id="data1">
  <input type="text" id="data2">
  <!-- Este botón hará la redirección -->
  <button id="ir">Ir</button>
</div>

Lo que sucede es que solo toma la información del primer input y no la del segundo, por lo tanto cuando doy click en 'ir' me lleva a un link a medio construir, qué hago?

2
  • 5
    El problema es que tienes data1 = $('#data1').val(); pero no asignas nunca data2. Para evitar fallos del estilo, usa el método de depuración del patito de goma
    – lois6b
    Commented el 19 mar. 2019 a las 7:40
  • 2
    @lois6b no conocía lo del patito de goma. En muchas preguntas, después de 5 ó 10 comentarios al OP pidiendo que explique el problema, y constatando la imposibilidad de éste para explicarlo con claridad, he terminado por decirle que intente explicarlo como si se lo explicase a un abuelo que no sabe de programación o a un niño. Realmente, cuando uno se encuentra perdido en un código es en gran parte porque no sabe explicar la lógica o el funcionamiento de su propio código. Eso me ha pasado a mi mismo muchas veces y muchas veces he visto ese problema aquí en muchas preguntas.
    – A. Cedano
    Commented el 19 mar. 2019 a las 10:41

1 respuesta 1

3

Como ya te indican en un comentario data2 está vacio.

Te corrijo tu código y comento los fallos en él.

// Variables para la modificación de URL
var data1 = ''
var data2 = '' //Definida pero nunca usada

// Al usar un tecla y levantarla
$('#data1').keyup(function() {
   // Guardar el dato en la variable correspondiente
   data1 = $('#data1').val(); 
  // Modificar la URL que se ve
  $('#spanData1').text(data1) //Cambio esta parte en pos de la simplicidad de 
  //código y su legibilidad

  
})

// Hace lo mismo que el anterior pero para el segundo
$('#data2').keyup(function() {
  // Guardar el dato en la variable correspondiente
   data2 = $('#data2').val(); 
  $('#spanData2').text(data2)
})

//Al hacer click en el boton ir
$('#ir').click(function() {
  // Crear la URL para la redirección y...
  var url = 'http://ejemplo.com/' + data1 + '/' + data2;
  // Hacer la Redirección en una ventana nueva
  //window.open(url, '_blank');
  console.log(url)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>URL</h1>
  <!-- Esto se modifica visualmente para que el usuario sepa a donde va a    ir. -->
  <h2>http://ejemplo.com/<span id="spanData1"></span>/<span id="spanData2"></span></h2>
  <!-- Estos son los inputs de data. -->
  <input type="text" id="data1">
  <input type="text" id="data2">
  <!-- Este botón hará la redirección -->
  <button id="ir">Ir</button>
</div>

Como te indica @lois6b hay métodos para evitar que te sucedan estas cosas. Empieza a construir de arriba a bajo simplificando lo mas posible el código y, si es necesario, hazte un esquema en papel, el gran olvidado de nuestro tiempo. El mero hecho de pintar la idea te puede ayudar mucho a encontrar el problema. Un saludo.

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.