'How to make this onclick go to a dynamic url?

So I have an onclick that directs to a linkedin page here:

<li id="toHover" onclick=" window.open('https://www.linkedin.com/in/jvanderkooi/?originalSubdomain=nl','_blank')" class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

This works great, it opens a new window with the provided url and leaves the other one open. However, I dont want to use this in-build url but want this element to get the url attribute of a certain user. Something like this:

<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" 
class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

When i do this, a new window opens up the root of my web app. Im currently running this on localhost only so I get to http://localhost:8080 where my app is running instead of the linkedin page url provided.

I tried doing this a bunch of different ways but just can't seem to get it to work. What am I missing here?

Edit: Here is the rest of the div that i am looping through for this in case it clears things up.

<div class="container" id="main-container">
            <div class="row">
                <div *ngFor= "let user of users" class ="col-md-6 col-xl-3">
                    <div class="card m-b-30">
                        <div class="card-body row">
                            <div class="col-6">
                                <!-- <a href=""><img src="{{user?.imageUrl}}" alt="" class="img-fluid rounded-circle w-60"></a> -->
                                <a href=""><img src="{{user?.photo}}" alt="" class="img-fluid rounded-circle w-60"></a>
                            </div>
                            <div class="col-6 card-naam align-self-center mb-0">
                                <h5>{{user.name}}</h5>
                                <p class="m-0">{{user.function}}</p>
                            </div>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{user.email}} <a href="#"></a></li>
                            <li class="list-group-item"><i class="fa fa-phone float-right"></i>Nummer: {{user.phoneNumber}}</li>
                            <li *ngIf="user.admin"  class="list-group-item"><i ></i>Admin</li>
                        </ul>
                        <div class="card-body">
                            <div class="float-right btn-group btn-group-sm">
                                <a (click)="onOpenModal(user, 'edit')" class="btn btn-primary tooltips" data-placement="top" data-toggle="tooltip" data-original-naam="Edit"><i class="fa fa-pencil"></i> </a>
                                <a (click)="onOpenModal(user, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-toggle="tooltip" data-original-naam="Delete"><i class="fa fa-trash"></i></a>
                            </div>
                            <ul class="social-links list-inline mb-0">
                                <style>
                                    #toHover{
                                        cursor: pointer;}
                                </style>
                 <li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" 
class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" 
class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
htmlangular


Solution 1:[1]

It is due to anchor a element inside the li.

Use the below

<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" ></li> If you need to use a tag, then you can try this and specify target blank

<li id="toHover"   
class="list-inline-item"><a naam="" target="_blank" href="user.linkedinURL" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

Solution 2:[2]

Here your solution even with .focus() to make it active:

document.querySelector('.open-url').addEventListener('click', function (e){
    e.preventDefault();
    window.open(this.href, '_blank').focus();
});

<li id="toHover" class="list-inline-item">
    <a href="https://google.com" data-placement="top" data-toggle="tooltip" class="tooltips open-url" data-original-naam="LinkedIn">Link</a>
</li>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bala
Solution 2

Related Questions