insert js variable into html href tag

Question

Essentially, trying to pass different (string) values to a variable

if (result == "A")
        finalLink.push("https://pool.wikitolearn.org/images/pool/d/d0/Not-giant-enough-letter-a.jpg");
if (result == "B")
        finalLink.push("https://img.clipartfest.com/a354883c247102b05c1657698b7bc8ed_-letters-b-23-b-boyjpg-the-letter-b-clipart_205-257.jpeg");
if (result == "C")
        finalLink.push("http://dailydropcap.com/images/C-9.jpg");

and then send the variable to html href tag

<a id="button" href="finalLink">Click me to be redirected to your answer</a>

don't know much javascript but in PHP you can do this by adding {{variableHere}}

push is an Array method. Did you mean to make use of an array there? — connexo
– connexo, Commented Jan 16, 2017 at 0:54
didn't know it was an array method. I don't need to use an array I don't think. im trying your answer below and failing so far :( — erayner
– erayner, Commented Jan 16, 2017 at 0:58
i've never used switch before. To put it into more context, i've created a codepen codepen.io/erayner/pen/mRrMVd I think I am getting confused with the variable 'result' — erayner
– erayner, Commented Jan 16, 2017 at 1:04

connexo · Accepted Answer · 2017-01-16 01:08:28Z

Javascript operates differently. When you do something like you suggested you're still on the server and generating the HTML that will be sent to the browser.

When you try the same with Javascript the HTML is already delivered and must be manipulated at run-time.

For that to work you need to select the element you want to modify (in this case easy by using document.getElementById() because your link actually has an id), then use the DOM API method DOMelement.setAttribute(attributename, value).

var finalLink, result;
var button = document.getElementById("button");

// example: result = "A"
result = "A";

function adjustLink() {
  switch(result) {
      case "A": 
        finalLink = "https://pool.wikitolearn.org/images/pool/d/d0/Not-giant-enough-letter-a.jpg"; 
        break;
      case "B":
        finalLink = "https://img.clipartfest.com/a354883c247102b05c1657698b7bc8ed_-letters-b-23-b-boyjpg-the-letter-b-clipart_205-257.jpeg"; 
        break;
      case "C":
        finalLink = "http://dailydropcap.com/images/C-9.jpg"
        break;
      default:
  }
  button.setAttribute("href", finalLink);
}

<a id="button" onclick="console.log(this.getAttribute('href')); return false;">Link</a>
<!-- return false; makes sure the link target is not followed (use only for this demo code) -->
<button onclick="result = 'A'; adjustLink();">Set result = "A"</button>
<button onclick="result = 'B'; adjustLink();">Set result = "B"</button>
<button onclick="result = 'C', adjustLink();">Set result = "C"</button>

That is far too much code to review and check for 2:06 a.m. You will have to figure out on your own. Now you know how to dynamically manipulate an element's attribute value in Javascript (which was your initial question).
haha, fair enough! just the end part of it anyway though. thanks anways connexo :)

Dexter Bengil · Accepted Answer · 2018-08-23 15:22:24Z

You can do something like this:

var result = "C";

switch(result) {
 case "A": 
   finalLink = "https://pool.wikitolearn.org/images/pool/d/d0/Not-giant-enough-letter-a.jpg"; 
   break;
 case "B":
   finalLink = "https://img.clipartfest.com/a354883c247102b05c1657698b7bc8ed_-letters-b-23-b-boyjpg-the-letter-b-clipart_205-257.jpeg"; 
   break;
 case "C":
   finalLink = "http://dailydropcap.com/images/C-9.jpg"
  break;
default:
}

$("#button").click(function (e){
 if( $(this).attr("href") == "#!" ){ // checks the current value of "href"
     $(this).attr("href", finalLink)  // sets the value of "href"
       .text("Click me to be redirected to your answer"); 
     e.preventDefault(); // prevents redirecting to the finalLink automatically
 }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" href="#!" class="btn btn-success">Test me</a>

OP asked how to manipulate href attribute. Also, why use jQuery here?
I edited my answer now, thanks for reminding. I added comments on how to set and get the href attribute. I'm using jQuery here because OP tagged jQuery on this question.

Collectives™ on Stack Overflow

insert js variable into html href tag

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related