Verwenden Sie Return-Funktion sinde .attr() jquery Element

Question

Auf meiner Website habe ich ein Eingabefeld und eine Schaltfläche enthalten. Das Eingabefeld dient zur Eingabe eines Youtube-Video-Codes. Wenn ich auf die Schaltfläche klicke, möchte ich, dass auf meiner Website eine neue href erstellt wird, indem Sie "www.youtube.com/watch?v=" verwenden und den Code hinzufügen, der in das Eingabefeld eingegeben wurde. Dann sollte das Youtube-Video in einem Leuchtkasten geöffnet werden (mit prettyPhoto, das ich bereits installiert habe und das funktioniert gut).

Dies ist der Code, den ich habe bisher:

<div> 
 
    <br> 
 
    <input type="text" style="text-align:center" placeholder="Video Code" id="code_input"> 
 
    <br> 
 
    <br> 
 
    <div> 
 
     <a href="#" id="youtube" rel="prettyPhoto"> 
 
      <button type="button" id="button" onclick="MyFunction">Jetzt anschauen!</button> 
 
      <script type="text/javascript"> 
 
       function MyFunction() { 
 
        var baselink="https://www.youtube.com/watch?v="; 
 
        var youtube_code=document.getElementById("code_input").value; 
 
        var new_link=baselink.concat(youtube_code); 
 
       } 
 
       $('#youtube').attr("href", function() { 
 
        return new_link; 
 
       }); 
 
      </script> 
 
     </a> 
 
    </div> 
 
</div>

Immer wenn ich ein YouTube-Video Code eingeben und auf den Button klicken, öffnet sich der Leuchtkasten aber gibt die folgende:

Screenshot

Könnte jemand bitte meinen Code ansehen und mir sagen, wohin ich gehe falsch? Oder erklären Sie mir bitte, wie ich dynamisch einen neuen href basierend auf den Eingabefelddaten erstellen kann und wie ich diesen in das Tag einfüge.

Vielen Dank für Ihre Hilfe !!

Answer 1

gefunden, dass der folgende Code löst das Problem:

<div> 
 
\t <br> 
 
    <input type="text" style="text-align:center" placeholder="Video Code" id="code_input"> 
 
    <br> 
 
    <br> 
 
    <div> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">    </script> 
 
     <script type="text/javascript"> 
 
\t   $(document).ready(function(){ 
 
\t   $("button").click(function(){ 
 
\t   var ycode = document.getElementById("code_input").value; 
 
\t   $('#youtube').attr("href", function(){ 
 
\t   return "https://www.youtube.com/watch?v=" + ycode; 
 
\t \t    }); \t \t 
 
\t    }); 
 
      }); 
 
     </script> 
 
<a href="#" id="youtube" data-lity> 
 
<button type="button" id="button">Jetzt anschauen!</button> 
 
</a> 
 
</div> 
 
</div>

Answer 2

Das Problem ist, dass Ihr new_link Variable innerhalb einer Funktion erstellt wird, so dass es nicht von außen erreichbar ist davon Umfang ist.

würde ich vorschlagen Ereignis mit Änderung für das Eingabefeld href-Attribut auf eine Schaltfläche, um sicherzustellen, aktualisiert werden, bevor sie angeklickt wird:

<div> 
     <input type="text" style="text-align:center" placeholder="Video Code" id="code_input"> 
     <div> 
      <a href="#" id="youtube" rel="prettyPhoto"> 
       Jetzt anschauen!  
      </a> 
     </div> 
    </div> 


$('#code_input').on('change', changeLink); 

function changeLink() { 
    var baselink="https://www.youtube.com/watch?v="; 
    var youtube_code = document.getElementById("code_input").value; 
    var new_link = baselink.concat(youtube_code); 
    $('#youtube').attr("href", new_link); 
} 

Auch diese Weise brauchen Sie nicht inline JavaScript zu verwenden, um hinzufügen ein Ereignis-Listener.

Darüber hinaus ist das Verschachteln eines Schaltflächenelements in einem Link kein gültiger HTML-Code, daher sollten Sie es in Betracht ziehen, es zu entfernen.