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!!
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 think this may have a simple answer that I'm missing. The following tag inserts a TV show name into any page on my website:
<span class="show-title"></span>
what I'm trying to do is incorporate that data dynamically into a HREF URL link.
So, let's say on the page I'm on:
produced the result: GOTHAM.
I'd like to then use that data to create this url:
https://en.wikipedia.org/wiki/GOTHAM_(TV_series)
So I'm trying stuff like:
</span>_(TV_series)"> Link
or
Link
nothing working - any help would be awesome. Thanks!
You could do something like this:
In HTML
<a class="wikipedia-link">Link</a>
And your JavaScript function:
setLink(showTitle) {
var link = document.getElementsByClassName("wikipedia-link");
link.setAttribute("href", "https://en.wikipedia.org/wiki/" + showTitle + "_(TV_series)");
}
The html you use is wrong. span shouldn't be inside tag a. No tag inside another.
If your result is in javascript variable, you can set the url using jquery.
$('a').attr('href', "https://en.wikipedia.org/wiki/" + result + "_(TV_series)");
result variable is your desired result.
Although there's better ways of going about doing this, I'm going to answer the question in the context in which you presented it:
First, give the url link a class or ID so you can easily select it with JavaScript to change the href value later. Also, don't try to nest the span tag anywhere inside the a tag. Leave it outside.
<span class="show-title">GOTHAM</span>
Link
Next, in a JavaScript file or a <script> tag, define your variables:
var showTitle, showWikipediaLink, linkElement
Then, assign value to your newly defined variables
linkElement = document.querySelector('.show-wikipedia-link');
showTitle = document.querySelector('.show-title').innerText;
showWikipediaLink = 'https://en.wikipedia.org/wiki/' + showTitle + '_(TV_series)';
Finally, use JavaScript to update the href value of the link element to the show's Wikipedia link:
linkElement.href = showWikipediaLink;
I am trying to make up a basic text editor, and I used execCommand a lot for this.
However, I want to create a heading in such a way, so that whenever user will click on the heading button(in text editor), the execCommand will make up a new heading and should add id to the newly created heading, so that, later I can create interlinks in document with just a single click.
Let say my input in for heading text editor is:
Create a heading with id
I've tried this to create a heading with id:
document.execCommand('formatBlock', false, header).id = userSelection;
HTML output for this:
<h3>Create a heading with id</h3>
As you can see, the id is not added to the HTML output, so how can I add an id to it?
I've also tried this link but didn't get much:
How to add class or id or CSS style in execCommand formatBlock 'p' tag?
Please help :)
EDIT :
Well, I got a hack to do this:
We can add the id to the newly created tag by using the Query selector so that whenever I will create a new tag using execCommand, I will find that tag by selecting the main div(in which editing is going on), and after finding that header tag, I can simply add the id to it.
Like I used this to create a header tag in div(contenteditable="true"):
document.execCommand('formatBlock', false, header);
And to add 'id' to this newly created tag, use this:
let elemMain = $("#editor " + header);
// this will find the div with id="editor" and then find the header tag inside it.
elemMain[elemMain.length - 1].id = userSelection;
//this will add an id to the last header tag inside of div.
Well, this is just a hack to get work done, but if anyone finds out a direct way to add 'id' to tag using execCommand then most welcome :)
Adding id attribute to the <body> tag here using execCommand.
Using javascript :
var idValue = "body-element";
document.execCommand(document.body.setAttribute("id", idValue));
Using jquery :
var idValue = "body-element";
document.execCommand($('body').attr('id', idValue));
Working snippet for newly created element:
var para = document.createElement("p");
var node = document.createTextNode("This is newly created paragraph ( inspect this element and see the id.)");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
var idValue = "new_id";
document.execCommand(para.setAttribute("id", idValue));
<html>
<body>
<div id="div1">
<p id="p1">This is an old paragraph.</p>
</div>
</body>
</html>
Had the same requirement to use document.execCommand to manipulate a contenteditable element, and eventually resorted to the innerHTML option of execCommand. For example...
document.execCommand("insertHTML", false, "<div id='myId'>Hello World!</div>")
...adds the specified HTML at the insertion point, leaving the HTML element addressable by myId. The drawback to this technique is that one has to construct the HTML string. An alternative is to employ the createElement function, and then reference the outerHTML of the element node when calling execCommand...
let elemNode = document.createElement('div')
elemNode.id = 'myId'
elemNode.innerText = 'Hello World!'
document.execCommand('insertHTML', false, elemNode.outerHTML)
Note that I only tested this on Chrome.
Hope this helps anyone else finding this nook of the internet.
I'm trying to create a lightbox that uses the rel attribute and the href/src (depending on the type of content). I need an if/else statement to assign an href to a variable (contentURL) if the content's a video but assign the src instead if the content's an image.
html for video content:
html for image content:
<img src="images/photo.jpg">
Here's what I have so far:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox');
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
var contentURL; //assign href or src to this variable
//IF/ELSE STATEMENT HERE
shadow.click(function(){
shadow.fadeOut(300);
lightbox.empty();
});
});
Also, if you could help me understand the ajax method for loading the content, that would be awesome! :)
Given the HTML above, one way to tell whether to grab the src or href attribute would be to test if the clicked link contains an image tag. I have a sample working with this code:
$("a[rel='lightbox'").click(function(e){
e.preventDefault();
var shadow = $('#lightbox-shadow'),
lightbox = $('#lightbox'),
$target = $(e.target).closest('a'),
$img = $target.find('img'),
contentURL;
shadow.fadeIn(300);
lightbox.delay(450).fadeIn(300);
contentURL = ($img.length > 0) ? $img.attr('src') : $target.attr('href');
console.log(contentURL);
});
You can see that working here if you open the console:
http://jsfiddle.net/9XELr/
However, this sample will only work if your youtube links never contain images. If they might, you will need to set up some other conditional logic, maybe a class or data attribute on the link itself that is different depending on the type of content.
I want to add a hyperlink on the ribbon. I was able to add the hyperlink to the existing div. The Hyperlinks are getting increased by one for every action i do on the page.
How i can make it(hyperlink) restrict to one?
I am using the following code:
var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm");
aTag.innerHTML = "link text";
mydiv.appendChild(aTag);
Please suggest me.
var aTag = document.createElement('a');
Creates a new anchor element everytime it's called. Without more context it's hard to see why and how often this code is called.
What we do know, is every time it's called, you're appending it to the div, which is why you have multiple links.
mydiv.appendChild(aTag);