We Keep Coding

How to use Javascript to change href and html text?

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!

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 !

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

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

click a hyperlink with javascript - href="#"

I'm new to Javascript.
I would like to click a hyperlink with Javascript.
the html looks like this:
<a id="random563e035c2b9149" class="btn" href="#">Launch PDF editor...</a>
the id changes every time I refresh the page, so I can't use it.
how do I click this hyperlink with javascript?
( if it helps, this is the div this hyperlink is in:
<div class="visibleifjs" id="yui_3_17_2_2_1446906385088_829"><a id="random563e0a0eede6f9" class="btn" href="#">Launch PDF editor...</a><div class="assignfeedback_editpdf_unsavedchanges warning">Unsaved changes</div></div>
)
enter code here

the id changes every time I refresh the page, so I can't use it.
id appear to begin with string "random" ? , followed by random integers ?
Try selecting a having id beginning with "random" , having class btn ; calling .click() on DOM element
$("a[id^=random][class=btn]")[0].click()

you can use class asigned to it:
$(".btn").on("click",function(){
alert($(this).html());
});

If the id of the parent div stays the same.
$('#yui_3_17_2_2_1446906385088_829 a').click(function(){
//do something
});

I have a solution but it's ugly... hope someone has a better idea.
luckily there are only three buttons ('btn' class) on this page, so the button I want to push was easy to find (but in other cases, if there are a million button on this page it wouldn't be so easy to find the right one...)
in my case, my button is the first button, so this works:
document.getElementsByClassName('btn')[0].click();

Why isn't my jQuery updating the DOM?

Ok, so I'm making a login screen for an application with a button that says "Not You?" which, when clicked, brings up a text-box to update the username on the screen. The issue I'm having is: the username updates once, but when tried again doesn't work. What's wrong with my jQuery?
Here's my jQuery:
var main = function(){
$('.not').click(function(){
$('.login-wrap').fadeOut(300, function(){
$('.not-you').fadeIn(300);
});
});
$('.enter').click(function(){
$('.name').replaceWith($('.new-input').val());
$('.not-you').fadeOut(300, function(){
$('.login-wrap').fadeIn(300);
});
});
}
$(document).ready(main);
And HERE'S a link to the CodePen.
Thanks!

From the docs, The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call,so for first time it is working fine but when first time .replaceWith() is used it replaces whole '.new-input' with class 'name',that is why afterwards it is creates problems.
Instead of
$('.name').replaceWith($('.new-input').val());
Try
$('.name').html($('.new-input').val());
OR
$('.name').text($('.new-input').val());
see here.

When you are doing replaceWith(), you are actually removing the whole tag with class '.name'.
So in the next time the code is unable to find any object with class 'name'.
Use '.html()' to make it work.

You can change your replaceWith() line with the following:
$('.name').replaceWith("<span class='name'>"+$('.new-input').val()+"</span>");
replaceWith() actually replaces the whole DOM element that has the class of name.
.replaceWith() | jQuery API Documentation

jQuery if url hash, click event/activate javascript

So from the home page, i have a link that goes to a products listing page.
The product page has expand/collapse divs.
I need the appropriate div to expand depending on what the url# is.
So the link on the homepage is
healthy snacks
when i click the link above, i am trying to activate this, on the product page:
Healthy Snacks
I've tried some of the other codes that i found that trigger click by checking for hash tag and none of them were working properly, i think it's because of the ReverseDisplay js.
Please any insight would help.
thanks

You can make the following changes in the document ready function of your product page:
Simple fix: Since the jQuery id-selector is #elementId, you can simply use the window.location.hash value as your id selector, and use it to target the desired element.
if ( window.location.hash ) {
$(window.location.hash).click(); //clicks on element specified by hash
}
Better: In addition to the above, take the js out of your markup.
$('#healthysnacks').click(function(e) {
e.preventDefault();
ReverseDisplay('products4');
});
Then, after doing this, use the $(window.location.hash).click() code from above.
Also, change your link to:
Healthy Snacks

You can use the hash property of the Location object, try the following:
$(document).ready(function(){
var id = window.location.hash;
$(id).trigger('click')
})
As you are using jQuery instead of using javascript: protocol, you can use the jQuery click method:
$('#healthysnacks').click(function() {
// do something here
})

The answers suggested here are valid, but...
Be extremely careful when using the window.location.hash as it is in a jQuery selector because this could lead to a XSS vulnerability. $() can also create an HTML element and with a carefully constructed hash value, someone could execute arbitrary JavaScript code.
For example
http://my-website.com/about#'><img src=x onerror=alert(/XSSed/)>
If my-websites.com/about page uses the window.location.hash inside a jQuery selector, that onerror code would end up getting executed.

How to add text to dynamically created DOM objects?

Say I have two buttons "Add Link" and "Add Text". The "Add Link" button automatically appends the following to the existing page:
When i click on the button "Add Text", the text of all dynamic links created should contain the text "Text".
I originally use "$("a").text("Text")" for the function of the "Add Text" button, but it does not work because the links are dynamically created as the user clicks the "Add Link" button.
How do I make it so that I can get "Text" into all of the dynamically created link?
NOTE: Something Like this
$('buttonforaddtext').live('click', function() {
$("a").text("Text");
});
Does not work for me because the button has been there the whole time, its the "a" that are dynamically created with the click of the "Add Link" button.

Try like below as I mentioned in comment,
$('#addLink').on('click', function () {
$(body).append('');
});
$('#addText').on('click', function () {
$('a.newLink').text('New Link');
});

$('button').on('click', function() {
/* your code */
});
If you have dynamic object you need to use .on() to let it work...

var yourLink = $(""+yourText+"");
or
var yourLink = $("<a href="+someURL+"/>");
yourLink.html("Text");
then
yourLink.appendTo($('body'));
Thats if you wish to create # the same time

That you describe sounds fine to me. Maybe you should post the code you are using. The follow should work:
$('#addLink').click(function(){
$('body').append('');
});
$('#addText').click(function(){
$('a').text('Text');
});
As long as your jQuery object ($('a')) is being created after the click event has happened, everything should work as you describe.

You need to use '.live' method, as our colleague said before. It happens that in the moment you are trying to bind the event, the element doesn't exis and it dosn't work.
Using .live, the window will keep listening for the element you've selected.
In the case you're using jQuery 1.7.+, I recomend you use the .on() method to bind the event and the .off() to unbind it as soon you dont need it anymore...
PS.: By the way, what are you trying to select?
$('buttonforaddtext')

Your problem is probably that live is beyond deprecated or you don't have the HTML that you think you have. Since you re-query the A tags in your callback for the text insertion and the button is static HTML, you shouldn't need 'live' or 'delegate' or 'on'. Just do a simple .click