2

Buenas noches querida Comunidad, tengo un problema al insertar un valúe de input en un scr de un link con javascript, no se si me hago entender. adjunto el código y si alguien me puede ayudar a resolverlo le agradecería mucho.

var codInp = document.getElementById("Cinp").value;
var cod = codInp;
var KeyBtn = document.getElementById("Cinp");
KeyBtn.onkeyup = () => {
  document.getElementById('IdPViYou').style.display = "block";
  $("#iFramYout").attr('href', 'https://www.youtube.com/embed/' + encodeURIComponent(cod) + '');
}
.textLinkYout {
  font-size: 15px;
}

.txtLink {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none
}

.ejCodLink {
  background: #3390ff;
  color: #fff
}
<div class="textLinkYout" id="LinkYout">
  <p class="txtLink">www.youtube.com/watch?v=<span class="ejCodLink">SrC5KaIBz4</span></p>
  <input type="text" name="Cinp" id="Cinp" placeholder="código video como muestra el ejemplo..." value="">
</div>
<div class="PreVisVid" style="display: none;" id="IdPViYou">
  <a id="iFramYout" href=""></a>
</div>

LO que quiero es cuando escriba en el imput el codigo, se muestre en el otro div una previsualizacion con el link, pero no me funciona. muchas gracias de antemano

1 respuesta 1

1

Tu principal problema es que declaras e inicializas la variable cod cuando el input aún está vacío, pues la página está apenas cargando.

He movido la declaración de la variable para que se haga dentro del evento onkeyup, además algo de limpieza del código y dejar un log de lo que va quedando en el anchor:

var KeyBtn = document.getElementById("Cinp");
KeyBtn.onkeyup = () => {
  var cod = document.getElementById("Cinp").value;
  document.getElementById('IdPViYou').style.display = "block";
  $("#iFramYout").attr('href', 'https://www.youtube.com/embed/' + encodeURIComponent(cod) + '');
  console.log($("#iFramYout")[0]);
}
.textLinkYout {
  font-size: 15px;
}

.txtLink {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none
}

.ejCodLink {
  background: #3390ff;
  color: #fff
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textLinkYout" id="LinkYout">
  <p class="txtLink">www.youtube.com/watch?v=<span class="ejCodLink">SrC5KaIBz4</span></p>
  <input type="text" name="Cinp" id="Cinp" placeholder="código video como muestra el ejemplo..." value="">
</div>
<div class="PreVisVid" style="display: none;" id="IdPViYou">
  <a id="iFramYout" href="">video</a>
</div>

1
  • Jachguate Muchas gracias por tu respuesta, estoy nuevo en Programación y tu aporte me ha ayudado mucho, :), de verdad gracias. el 26 may. 2021 a las 1:08

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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