How do you change the link in javascript?
I have a form where the user inputs an URL. The value resulting from that input after tweaking it a bit is the variable #url which is displayed to the user right away.
I need to make the like and tweet buttons in my site point to that URL. Making their HREFS equal to the variable #url
This are the share
buttons:
Tweet
Here you can see how it works: //www.chusmix.com/tests/magic.html
What appears as "Improved link" is the url I want the share buttons to use.
cweiske
29k13 gold badges127 silver badges189 bronze badges
asked Apr 26, 2011 at 4:09
lisovaccarolisovaccaro
30.9k96 gold badges249 silver badges403
bronze badges
1
This is what you want to do -
var yourElement = document.getElementById['yourHref'];
yourElement.setAttribute['href', '#url'];
answered
Apr 26, 2011 at 4:18
5
Reference the following page on the jquery site:
//api.jquery.com/attr/
Should be able to use attr['href', 'value];
answered Apr 26, 2011 at 4:13
1
try this:
$["#url"].keypress[
function[e] {
if[e.keyCode == 13] {
$["#output"].attr['href', cleanURL[$["#url"].val[]]];
}
}
];
answered Apr 26, 2011 at 4:17
Naveed ButtNaveed Butt
2,7916 gold badges30 silver badges52 bronze badges
1
$['#twtbutton'].prop['href', #url];
$['#fbbutton'].prop['href', #url];
This
would change the 'href' property of the html element[s] with an id=twtbutton and id=fbbutton to the value stored in #url, where the value stored in #url is a string datatype. This answer utilizes the jQuery library.
answered Mar 22, 2018 at 23:13
2
In this quick article, we’ll discuss how to change the URL in JavaScript by redirecting. We’ll go through a couple of different methods that you can use to perform JavaScript redirects.
JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the
need for plugins. In this series, we’re discussing different tips and tricks that might help you in your day-to-day JavaScript development.
When you’re working with JavaScript, you often need to redirect users to a different page. JavaScript provides different ways of doing that.
Today, we’ll discuss how to perform URL redirections in vanilla JavaScript and with the jQuery library.
How to Change the URL in Vanilla JavaScript
In this section, we’ll go through the
different built-in methods provided by JavaScript to implement URL redirection. In fact, JavaScript provides the location
object, a part of the window object, which allows you to perform different URL-related operations.
The location.href
Method
The location.href
method is one of the most popular ways to perform JavaScript redirects. If you try to get the value of location.href
, it returns the value of the current URL. Similarly, you can also use it to set a new URL, and users will then be
redirected to that URL.
Let’s go through the following example.
console.log[location.href];
// prints the current URL
location.href = '//code.tutsplus.com';
// redirects the user to //code.tutsplus.com
As you can see, it’s fairly easy to redirect users with the location.href
method. Since the location
object is part of the window
object, the above snippet can also be written as:
window.location.href = '//code.tutsplus.com';
So in this way, you can use the location.href
method to change the URL and redirect users to a different webpage.
The location.assign
Method
The location.assign
method works very similarly to the location.href
method and allows you to
redirect users to a different web page.
Let’s quickly see how it works with the following example.
location.assign['//code.tutsplus.com'];
As you can see, it’s pretty straightforward. You just need to pass the URL in the first argument of the assign
method, and it will redirect users to that URL. It’s important to note that the assign
method maintains the state of the History
object. We’ll discuss this in detail in the next section.
The location.replace
Method
You can also use the location.replace
method to
perform JavaScript redirects. The location.replace
method allows you to replace the current URL with a different URL to perform redirection.
Let’s see how it works with the following example.
location.replace['//code.tutsplus.com'];
Although the location.replace
method looks very similar to the location.href
and location.assign
methods of redirecting users to a different URL, there’s an important difference between them. When you use the location.replace
method, the current page won’t be saved in the session, and it’s actually removed from the
JavaScript History
object. So users won’t be able to use the back button to navigate to it.
Let’s try to understand it with the following example.
// let’s assume that a user is browsing //code.tutsplus.com
// a user is redirected to a different page with the location.href method
location.href = '//design.tutsplus.com';
// a user is redirected to a different page with the location.replace method
location.replace['//business.tutsplus.com'];
In the above example, we’ve assumed that a user is browsing the //code.tutsplus.com
webpage. Next, we have used the location.href
method to redirect the user to the //design.tutsplus.com
webpage. Finally, we’ve used the location.replace
method to redirect the user to the //business.tutsplus.com
webpage. Now, if the user clicks on the back button, it would go back to //code.tutsplus.com
instead
of //design.tutsplus.com
, since we’ve used the location.replace
method, and it has actually replaced the current URL with //business.tutsplus.com
in the History
object.
So you should understand the difference between location.replace
and other methods before you use them. You can’t use them interchangeably since the location.replace
method alters the state of the JavaScript History
object. And thus, if you want to preserve the state of the History
object, you should use other methods of redirecting users.
How to Perform URL
Redirections With jQuery
Although vanilla JavaScript offers enough options when it comes to URL redirection, if you’re still wondering how to do it with the jQuery library, we’ll quickly go through it in this section.
In jQuery, you can use the attr
method to perform redirection, as shown in the following snippet.
$[location].attr['href', '//design.tutsplus.com'];
As you can see, it’s fairly easy to redirect users with jQuery!
So that’s it for the different ways of performing JavaScript redirects. And with
that, we’ve reached the end of this quick article as well.
Conclusion
Today, we discussed how you can implement JavaScript redirects. We discussed different methods that you can use to perform JavaScript redirects, along with some examples.
Did you find this post useful?
Software Engineer, FSPL, India
I'm a software engineer by profession, and I've done my engineering in computer science. It's been around 14 years I've been working in the field
of website development and open-source technologies. Primarily, I work on PHP and MySQL-based projects and frameworks. Among them, I've worked on web frameworks like CodeIgnitor, Symfony, and Laravel. Apart from that, I've also had the chance to work on different CMS systems like Joomla, Drupal, and WordPress, and e-commerce systems like Magento, OpenCart, WooCommerce, and Drupal Commerce. I also like to attend community tech conferences, and as a part of that, I attended the 2016 Joomla World
Conference held in Bangalore [India] and 2018 DrupalCon which was held in Mumbai [India]. Apart from this, I like to travel, explore new places, and listen to music!
How do I change the text in a link?
Right-click anywhere on the link and, on the shortcut menu, click Edit Hyperlink. In the Edit Hyperlink dialog, select the text in the Text to display box. Type the text you want to use for the link, and then click OK.
How do you make a link in JavaScript?
How to create a link in JavaScript ? // Create anchor element. var a = document..
Create a text node with some text which will display as a link..
Set the title and href property of the
element..