CODEWITHSUNDEEP
javascripthtmlinnerhtml
Bjorn Lundberg
Bjorn Lundberg

Reputation: 17

make innerHTML string clickable

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>

Upvotes: 0

Views: 285

Answers (2)

Suresh
Suresh

Reputation: 923

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

And for on Submit directly launching the link

function myFunction() {
    let userInput = document.querySelector("#userInput");
    let message = document.querySelector("#message");
    window.open("https://shop.linklayer.co.za/Service?Search.SearchString=" + userInput.value + "&Search.ComplexName=&Search.Unit=&Search.NetworkType=", "_blank");
}

Upvotes: 1

dippas
dippas

Reputation: 60553

OP Comment

Follow up question if I may... Is it possible to have the submit button act as a link, so that when you click submit it direct you to the URL that the a href provides back at the moment?

You can do this:

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

button.addEventListener("click", e => {
  e.preventDefault(); //added only for demo to see result in console.log
  const link = e.currentTarget.href = `
    https://shop.linklayer.co.za/Service?Search.SearchString=${userInput.value}&Search.ComplexName=&Search.Unit=&Search.NetworkType=">
`;
  console.log(link)
});
#button {
  background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
  padding: 1px 4px;
  border: 1px solid #000;
  border-radius: 3px;
  color: black;
  text-decoration: none;
  font-family: "MS Shell Dlg 2";
  font-size: 13.3px;
}
<input id="userInput" />
<a id="button" href="">Submit</a>
<h1 id="message"></h1>

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>

Upvotes: 1

Related Questions