I have these two variables:
var a_link = "someLink.com";
var a_text = "Some url text";
I'm trying to insert these two variables into an anchor tag. Like this:
a_text
Here's what I tried so far:
<a href="javascript:window.open(a_link);">
How can I change the a_link and the a_text to the corresponding variables?
What you're trying to do can be achieved by DOM manipulation.
Basicly: you have an anchor element <a> with two variables: the href and the inner HTML. You just need to find the anchor element and change these properties to the corresponding variables.
var a_link = "someLink.com";
var a_text = "Some url text";
var anchor = document.getElementsByTagName("a")[0];
anchor.href = a_link;
anchor.innerHTML = a_text;
The [0] you see after the document.getElementsByTagName("a") is there to state that we're looking for the first anchor element. If you were trying to change, say, the third <a> you'd use [2].
You can read more about DOM Manipulation here.
Related
There is a function called "dictionary link" in Anki as the manual explains:
Dictionary Links
You can also use field replacement to create dictionary links.
Imagine you’re studying a language and your favourite online dictionary allows you to search for text using a web URL like:
http://example.com/search?q=myword
You could add an automatic link by doing the following in your template:
{{myword}}
check in dictionary
The template above would allow you to search for each note’s expression by clicking on the link while reviewing.
I am now learning HTML + CSS + Javascript from scratch, I'd like to add a similar tool in my own practice website.
I want to copy the text content (the word that I want to check in the dictionary) of an element, add it to the end of the url. When I click the link the corresponding dictionary page will show up.
For example:
<span id="search">entry</span>
copy "entry" and add it to the end of
<a id="dictionary" href="http://example.com/search?q=">link</a>
Since I am a complete beginner, I haven't learned jQuery or other tools yet. Is it possible to do this only by HTML and Javascript?
const search = document.getElementById("search");
const link = document.getElementById("dictionary");
link.href = `http://example.com/search?q=${search.innerText}`;
You have to assing new href property to link by getting innerText of search element
Did you try to use these apex:
<a href=`http://example.com/search?q=${myword}`>check in dictionary</a>
Otherwise you have to build the link by js script and then assign to a element:
let link = 'http://example.com/search?q=' + customParam
// Fetch the tag <a>
let hrefElement = document.getElementById('#idElement');
// Change the href param with your link
hrefElement.href = link;
Try this link and try to work around
function clicks(){
var foo = document.getElementById("dictionary").id
$("a").attr("href", "http://example.com/"+foo+"?q=")
}
document.getElementById("myLink").href = customLink will set your link to your a element
//get input element
var inputElement = document.getElementById('param-input');
// add event to listen every time a letter is introduced
inputElement.addEventListener("keyup", composeUrl);
function composeUrl() {
// get value from input
var param = inputElement.value;
// compose url
var customLink = "http://example.com/search?q=" + param
//set href
document.getElementById("myLink").href = customLink
//get href
var result = document.getElementById("myLink").href;
//print link in a div
document.getElementById("demoLink").innerHTML = result.toString()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="param-input" />
<a id="myLink" />
<div id="demoLink"> url composed </div>
I have a function that creates text using write statements. How could I rewrite the following so the word "here" is an clickable anchor tag?
href = www.example.com target =_blank id = link
.write("website:Click here to visit our website.",800)
You can use
var mydiv =document.getElementById("myDiv");
mydiv.innerHTML = "click <a href='yourLinkAction'>here<\a> to go to website";
Refer this How to add anchor tags dynamically to a div in Javascript?
var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"www.example.com");
aTag.setAttribute('target',"_blank");
aTag.setAttribute('id',"link");
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);
UPDATE: Using Write()
document.write("website:Click <a href='http://www.google.com'
target='_blank' id='link'> here</a>to visit our website.");
Basically the .write() method is used for directly writing on your HTML. So you can't change it later after you've already written. Try the following way,
function WriteNow(){
document.write("website:Click <a href='http://www.google.com/' target =_blank id ='link'>here</a> to visit our website.",800);
}
WriteNow();
jsFiddle
I have captured 3 values from a datalist template using JavaScript, now I need to append these values into an existing anchor which is:
<a id="link" href='nextpage.aspx?id=<%#Eval("PlateId")%>&pp= #Eval("price")%>'>
I found the way to get the anchor href from JavaScript:
<script language='javascript' type="text/javascript" >
function addLink() {
var anchor = document.getElementById("link");
anchor.href = anchor + "&qty=";}
</script>
But, I can't add the js value after "&qty=", I have tried adding the value like this:
anchor.href = anchor +"&qty=+Value+"
And with this:
anchor.href = anchor +"&qty='Value' "
I can't put it out of the quotation marks, because it won't display in the anchor.
anchor.href = anchor + "&qty="
should be
anchor.href = anchor.href + "&qty="
...otherwise you are trying to turn the link element into a string!
Meanwhile, you still need to keep Value out of the quotation marks, otherwise the final text generated will always be exactly that text: Value. If Value is a variable and is not returning the value you expect (an empty or undefined value, for example), then you need to look at the code that declares it and change that.
Dynamically change href atrribute value (or) You can
able to append the existing URL
Tips: 1 - Use the jQuery .attr() Method
$("selector").attr("href", newURL));
Tips: 2 - Use javascript element selector document.getElementById
example:
TEST URL
var redirect_url = document.getElementById('test');
redirect_url.href = "new url";
(or)
document.getElementById('test').href = "newURL";
(or)
using setAttribute() method *Note:broken in IE
redirect_url.setAttribute("href", "new url");
My a-tag (link) contains innerHTML which is an image like this:
.innerHTML = <img alt="hello world" src="/Content/Images/test.png">
How can I get the text of the alt attribute with JQuery?
You really don't need jQuery. If you have the a element you can do this:
// lets call the anchor tag `link`
var alt = link.getElementsByTagName('img')[0].alt; // assuming a single image tag
Remember attributes map to properties (most), and unless the property is changed, or the attribute, the two should reflect the same data (there are edge cases to this, but they can be handled case-by-case).
If you truly do need the attribute there is
var alt = link.getElementsByTagName('img')[0].getAttribute('alt');
Last scenario is if you only have the image tag as a string.
var str = '<img alt="hello world" src="/Content/Images/test.png">';
var tmp = document.createElement('div');
tmp.innerHTML = str;
var alt = tmp.getElementsByTagName('img')[0].alt;
If you must use jQuery (or just prefer it) then the other answer provided by Alexander and Ashivard will work.
Note: My answer was provided for completeness and more options. I realize the OP asked for jQuery solution and not native js.
Being $a your <a/> element.
Using jQuery you can do:
$("img", $a).first().attr("alt");
Or, using pure JavaScript:
var $img = $a.getElementsByTagName("img")[0];
console.log($img.alt);
See it here.
use this.
var altName=$('a img').attr('alt');
I have h1 tag, which id called "step1". I would like to add link for that with Javascript. So i trying to code with javascript as follow:
div = document.getElementById('step1');
newlink = document.createElement('a');
newlink.setAttribute('class', 'heading');
newlink.setAttribute('href', 'javascript:showStep(2);');
div.appendChild(newlink);
But it render only this way. <h2 id="step1">Step<a href="javascript:showStep(1);" class="heading"> in HTML.
Actually I want following result as :
<h2 id="step1"><a href="javascript:showStep(2);"
class="heading">Choose Desired Services</a></h2>
So please help me to create this.
If you're just adding an element to trigger some JavaScript behavior, there's absolutely no need for it to be an <a> tag. Just make a <span> and set its "onclick" attribute to the function you want to call:
var div = document.getElementById('step1');
var newlink = document.createElement('span');
newlink.onclick = function() { showStep(2); };
newlink.innerHTML = "Choose Desired Services";
div.appendChild(newlink);
You can also give it a class name etc. so that it can be styled appropriately (pointer cursor, whatever).
Also, don't forget var!!