Create a URL hyperlink (href) using getElementById from user Input [duplicate]

Question

Is there a way I can create a hyperlink or Link based from getElementById from user inputs?

This is my code for user inputs:

<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
<br><button type="button" onClick="generateURLX();">Generate URL</button></br>

This is the part where I determine those id in a function

<script>
function generateURLX()
{
var partx = document.getElementById('first_name').value;
var party = document.getElementById('last_name').value;
var urlx = "https://example.com/"+partx+"/"+party+".html";
document.getElementById('resultx').innerHTML = urlx;
</script>

And this is where I display the hyperlink:


<span id="resultx"></span>

I tried using <a href but I failed on making a hyperlink for that specific id=resultx which is basically based from var urlx

<a href="#resultx"></a>

@KonradLinkowski it helped me on familiarizing to create a simple hyperlink. But the problem I'm having is that, I do not predetermine the link, the hyperlink will be created based from the user inputs I've shown from the post. Basically; a user inputs his First and last name and my code should output a hyperlink of a website based from the inputted first and last name, for Example ; James Smith, the hyperlink should output example.com/James/Smith.html. I hope you understand it. Thank you for responding. — John Nicholas Santos
– John Nicholas Santos, Commented Nov 14, 2022 at 7:21

Paulo Santos · Accepted Answer · 2022-11-19 11:50:53Z

1

All right, you computed the value of urlx right?

What you need is an identifier for the hyperlink you want to address, then you can use something like this:

HTML

    <a id="linkx" href=""><;/a>

CODE

    document.getElemebtById("linkx").href = urlx;

And it should work ok.

edited Nov 19, 2022 at 11:50

answered Nov 14, 2022 at 7:17

Paulo Santos

11.7k5 gold badges45 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

Create a URL hyperlink (href) using getElementById from user Input [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related