HTML link including current url for no reason

Question

so I have this code here and I have it set up so when I click the button, it changes the footer. The issue is that when I click the link, it includes the current website url before the url I typed. How can I stop this so that when the link is clicked it only goes to the url I had typed? Example: I type www.profile.com as the url in JS but when I run the file and click on it in-browser it would take me to www.currentWebsite.com/currentFile/www.profile.com

Thanks!

HTML

    <button onclick="changeFooter()">change footer</button>


<footer class="footer footer-black footer-big">
                    <div class="container">
                                            <div class="theme-bottom-footer-content">
                            <div class="theme-bottom-footer-content">
        <ul id="menu-social-links-menu" class="footer-menu pull-left"><li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="https://www.yelp.com">Yelp</a></li>
</ul>
<div class="copyright pull-right">
            <a href="https://themeisle.com/themes/hestia/" target="_blank" rel="nofollow">Theme</a> | Powered by <a href="http://wordpress.org" rel="nofollow">WordPress</a>            </div>
                        </div>
                        </div>
                        </div>
                </footer>

JavaScript:

function changeFooter(){
$(".copyright.pull-right").html("Website | Created by by <a href='www.portfolio.com' target='_Blank'>My Name</a>");
// alert("inside change footer");
//document.getElementsByClassName('copyright pull-right').innerHTML = "hi";
}

score 0 · Answer 1 · answered May 10 '18 at 04:57

You can simply prefix the URL in your JavaScript code with http:// or https:// (whichever is appropriate) to create an absolute URI.

By default the URL you have listed is interpreted as being relative to the current path. If you're interested, some examples are already listed in another StackOverflow answer.

score 0 · Accepted Answer · answered May 10 '18 at 05:15

Whenever you are handling URLs it is always best to use them with protocols (http, https, ftp) to prevent the browser to interpret them as a path rather than a URL. That is what is happening in your case.

As @grovesNL mentioned you can check and pre-pend protocol to the given domain name. Here is the updated code.,

function changeFooter(){
    $(".copyright.pull-right").html("<p>Website | Created by by <a href='http://www.portfolio.com' target='_Blank'>My Name</a></p>");
    // alert("inside change footer");
    //document.getElementsByClassName('copyright pull-right').innerHTML = "hi";
}

I'd recommend you to use http:// unless if you are sure that webpage is served over https://, if you don't want your users see a warning from browser.

HTML link including current url for no reason

2 Answers2