make innerHTML string clickable-CodePudding

I'm basically trying to generate URLs by having the user enter their FSAN number, the rest of the URL always remains the same.

I'm giving data back to the client via message.innerHTML but I need this to be clickable to the URL provided back to the user.

Demo can be found here: https://tech5dev.co.za/index2.html Active fsan number you can use: 48575443F9D778A8

So basically when submitting, it's returning correctly, but I need it to be clickable to the same URL.

Any feedback would be greatly appreciated! Code below:

<body>
<h3>Please enter your FSAN number</h3>
<input id="userInput"<br><br>
<button onclick="myFunction()">Submit</button>
<h1 id="message"></h1>


<style>
    body{
    background-color: darkgray; text-align: center; color: white;
    }
</style>

<script>
    function myFunction(){
        let userInput = document.querySelector("#userInput");
        let message = document.querySelector("#message");
        
        message.innerHTML ="https://shop.linklayer.co.za/Service?Search.SearchString=" userInput.value "&Search.ComplexName=&Search.Unit=&Search.NetworkType=";
}
</script>

</body>
</html>

CodePudding user response：

You need to create/add the <a href=""> in innerHTML

const userInput = document.getElementById("userInput");
const message = document.getElementById("message");
const button = document.getElementById("button");

button.addEventListener("click", () => {
  message.innerHTML = `
    <a href="https://shop.linklayer.co.za/Service?Search.SearchString=${userInput.value}&Search.ComplexName=&Search.Unit=&Search.NetworkType=">Link</a>
`;
});

<input id="userInput" />
<button type="button" id="button">Submit</button>
<h1 id="message"></h1>

CodePudding user response：

Update your innerHTML as below.

message.innerHTML ="<a href='https://shop.linklayer.co.za/Service?Search.SearchString=" userInput.value "&Search.ComplexName=&Search.Unit=&Search.NetworkType=' target='_blank'> Updated Link </a>";