How to use Javascript to change href and html text?

Question

So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.

Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.

the Html code:

<div class="manageable-content" data-container="edit_register_ind_container">
    <a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
 </div>

First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"

This is what I have got for that part:

// url manipulation
    $(document).ready(function(){
     $("#register_ind_container").click(function(){
           $("#manageable-content a").text('Start a Fundraiser');
              });
     $("#register_ind_container").attr("href", "http://google.ca");
    });

No luck so far for any of it.

a little background information: I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).

How I'm referencing the javascript code.

<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>

My css works so I'm certain this should to, but I just don't know why it isn't. All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)

Thank you for your time!

Answer 1

I saw your both code :

 $("#register_ind_container").attr("href", "http://google.ca");

This line will execute on page load so href should be changed on load

$("#register_ind_container").click(function(){

But when you performing this click on Id it wont work because at that instance this id associated with an hyperlink

so hyperlink having the default subset rules

for Overriding this you can try

$("#register_ind_container").click(function(e){
    // custom handling here
    e.preventDefault();
 $(this).text('Start a Fundraiser');
});

But this is also not a Good Practice. Hope this helps !

Answer 2

$(document).ready(function(){
     $("#register_ind_container").click(function(){
           $(this).text('Start a Fundraiser');
           $(this).attr("href", "http://google.ca");
     });
});

Answer 3

You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)

// url manipulation
$(document).ready(function(){
  $("#register_ind_container").click(function(){
   $(this).text('Start a Fundraiser').attr("href", "http://google.ca");                            
  });
});