How to put JavaScript value inside HTML ?
I am trying to put JavaScript value inside HTML like below.
<p>
Check your Credit Score <a href="http://someaddress.com?first_name='+ first_name +'" target="_blank">Here</a>
</p>
-
What have you tried so far? What has your research shown? Hod did that research fall short?Jon P– Jon P2021-10-12 03:38:17 +00:00Commented Oct 12, 2021 at 3:38
Add a comment
|
5 Answers
To achieve the results, you can make use of document.getElementById('').href property:
HTML (added the id attribute to the <a> tag):
<p>
Check your Credit Score <a id="link" href="" target="_blank">Here</a>
</p>
JavaScript:
window.onload = function() {
var first_name = 'Peter';
document.getElementById('link').href = 'http://someaddress.com?first_name='+ first_name;
// debug your results
console.log(document.getElementById('link').href);
}
Here is the JSFiddle
Comments
do this if you want to change the link
document.querySelector('a').href = "http://someaddress.com?first_name=" + first_name;
2 Comments
abu abu
Thanks @brian033. I would like to put value on
first_name.
Raptor
this may be incorrect. the
document.querySelector() will return the first <a> element in the document, which might not be a good practice in the real situation. See documentationYou can do like this
<p>
Check your Credit Score
<a href="http://someaddress.com?first_name='+ first_name +'" target="_blank"
>Here</a >
</p>
<script type="text/javascript">
const a = document.querySelector('a');
const first_name = 'John';
a.href = 'http://someaddress.com?first_name=' + first_name ;
</script>
5 Comments
Raptor
that's not related at all. OP asked how to insert the
first_name variable into the href URL.
Saeed Hassan
Oh, I didn't understand it correctly
Raptor
this may be incorrect. the
document.querySelector() will return the first <a> element in the document, which might not be a good practice in the real situation. And why use const instead of var? You're changing the value.Saeed Hassan
yeah, I know
document.querySelector() will return the first anchor element. I have used it here because I just want to show this guy how to insert the javascript variable inside the href attribute.Saeed Hassan
and i have used the
const keyword here bcz we are not changing the value of first_name variable and here const follows the good practice in the real situation.For best practice do an if check otherwise your selector might not be found in the dom.
Also, if in querySelector("...anything...") not querySelector("a") is given the editor won't suggest the href prop that exists or not. Hence, setAttribute makes more sense.
const URL = "http://someaddress.com?first_name="
const name = 'adiat'
const anchor = document.querySelector(".what-ever")
if(anchor){
anchor.setAttribute("href", `${URL}${name}`);
}else{
console.warn("element not found to replace href attribute")
}
// shorthand -> anchor?.setAttribute("href", `${URL}${name}`);
Comments
A robust way would be to use a token to replace, I've used {{FirstName}}. Use an attribute selector to select via that token then replace that token on the href attribute
let firstNameLinks = document.querySelectorAll("a[href*='{{FirstName}}'");
let firstName = "Bob";
for(i = 0; i < firstNameLinks.length; i++){
console.log(firstNameLinks[i].href)
firstNameLinks[i].href = firstNameLinks[i].href.replace("{{FirstName}}", firstName);
}<a href="https:someurl.com?firstName={{FirstName}}">A link</a>
<a href="https:someotherurl.com?aVariambe=false&firstName={{FirstName}}">Another link</a>