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!

Why are you wrapping it in a click handler? You could just do $('#register_ind_container').attr('href', 'http://google.ca').text('Start a Fundraiser') without the click handler. Example — Mike Cluck
– Mike Cluck, Commented Apr 18, 2016 at 17:30
So what's not working? Is the click handler firing correctly, or is the text/link not being changed? — WillardSolutions
– WillardSolutions, Commented Apr 18, 2016 at 17:32
Are any other jQuery functions in your urlmanipulation.js working? — UndoingTech
– UndoingTech, Commented Apr 18, 2016 at 17:33
those are the only functions in my .js, in my other .js documents (bootstrap scrolling etc) those work fine. The text change is not working, nor is the link change working. — SorryEh
– SorryEh, Commented Apr 18, 2016 at 17:39

hemanjosko · Accepted Answer · 2016-04-18 17:43:20Z

2

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 !

edited Apr 18, 2016 at 17:43

answered Apr 18, 2016 at 17:39

hemanjosko

3151 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SorryEh Over a year ago

thank you for the explanation! Can I ask why it isn't good practice?

hemanjosko Over a year ago

If you are working with team of Developers than this kind of practice wont work there. because if you submit register form and after json call you want to change the hyperlink and start Fundraising through that, you are overriding same function again and again so this gonna create misconception for the team good codes are like that, your team can easily understand what you are doing in it. Even Here you are overriding the hyperlink,

hemanjosko Over a year ago

but if you pass the data through form to json call etc whole serialization would work there.. submit form and than start fundraising you can change the whole page or load another page on the success function of that form so link will come through that.. you dont need to override subsets

SorryEh Over a year ago

oh i see, good to know thank you. Atm I'm on my own, most of what's being handled on the backend is taken care of by the CMS which is the issue because It's taking forever to get access to this html document which would solve 99% of the issues I'm having. They are making this more complicated than it needs to be. Again, thanks for the explanation I will keep this in mind moving forward.

Mojtaba · Accepted Answer · 2016-04-18 17:32:23Z

1

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

answered Apr 18, 2016 at 17:32

Mojtaba

5,0175 gold badges24 silver badges40 bronze badges

Comments

Rajshekar Reddy · Accepted Answer · 2016-04-18 17:33:14Z

1

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");                            
  });
});

answered Apr 18, 2016 at 17:33

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to use Javascript to change href and html text?

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related