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>"

Bilel · Accepted Answer · 2020-11-24 23:57:50Z

2

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>

answered Nov 24, 2020 at 23:57

Bilel

1,4291 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xiaqian1999 Over a year ago

Thank you so much, now it works, and my code turns to be '<br> <a class="event-link" href="' + event.event_link + '">'+ event.event_link+'</a>' I saw the cases where I did it wrong, I didn't display the link to HTML all all

Bilel Over a year ago

You are welcome! You can set it as an accepted answer if your problem is solved..

Collectives™ on Stack Overflow

Why href link is not adding to the html using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related