javascript - Why href link is not adding to the html using jquery

Question

I create the variable for event link, as the user input the link, I want it to display as a hyperlink in HTML by using jquery. Since user could do a infinite input, therefore the output of the link will be on the next line.

var $event_link_selector = $('#event-link');
var event_link = $event_link_selector.val();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="event-link">Event Link:</label>
<textarea id="event-link"></textarea>

Ex: If the user enters www.example.com into the test area, I want the page to return me that link and be able to click on it. These are the jquery I currently trying but not working

//returns me the user input link as string instead of link
"<br> <a class='event-description'>"+ event.event_link + "</a>"

//returns none
"<br> <a class='event-description' href='" + event.event_link + "'></a>"

标签： javascripthtmljquery

Answer 1

You didn't share your whole jQuery code... But it's already clear your quotes were misplaced!

$('#event-link').on('focusout',function(){
  var event_link=$(this).val();
  $(this).parent('.link-container').append('<a class="event-description" href="' + event_link + '">'+event_link+'</a>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link-container">
<label for="event-link">Event Link:</label>
<textarea id="event-link"></textarea>
</div>