We Keep Coding

Javascript that changes specific href link to new one? (no jquery)

Friends, can you give me simple javascript that will change href link with new one on all posts in my blogger blog.
<a href="http://domainone.com/brb.php">
to become
<a href="http://domaintwo.com/brb.php">
the problem is that domainone is no longer available and I need a mass change when user asks for this domain to be directed to the new one.
please no jquery only oldschool javascript.
Regards!

you can use .setAttribute(), something like this:
var links = document.getElementsByTagName('a')
for(var i=0;i<links.length;i++){
if(links[i].getAttribute('href') && links[i].getAttribute('href').indexOf('domainone') >=0 )
links[i].setAttribute('href', 'http://domaintwo.com/brb.php');
}
link

//If you want to change All a tags href, Use it
var aTags = document.querySelectorAll('a');
for (var tag of aTags) {
tag.setAttribute('href','http://domaintwo.com/brb.php');
}
//If you want to change specific one, Use it.
var aTag = document.querySelector('#first');
aTag.setAttribute('href','https://stackoverflow.com//posts/45746835');
a
b
c
Try This.
The important thing is using setAttribute

javascript add class to an anchor when page loaded

I am trying to add a second class to my element
Before
<div class="foo1">
<a class="class1" >Text</a>
</div>
After
<div class="foo1">
<a class="class1 class2" >Text</a>
</div>
here is my javascript code (tried but no success):
window.onload = function() {
document.getElementById('class1').className = 'class2';
};
UPDATE
actually, all of your answers work, but since this (class1) is a click event, by running the codes it temporarily adds the second class (class2) to the class1 but when page is reloaded , it has disappeared. I need to implement it via a click event by clicking class1. How do I do it?
2nd UPDATE
actually the site users have the ability to change this class, so I am trying to make this happen: that a user changes a class by clicking on class1 and making it "class1 class2"

Two problems with your code:
You're trying to look up class1 as an id, but you don't have any element with id="class1"; I assume you want to look up elements with that class, but that's not what getElementByid does
You're overwriting the class list by assigning to className; instead, you need to append to it (including a space, so you end up with the right string).
If you want to add the second class to all elements that have class1, you'll need a loop:
[].forEach.call(document.querySelectorAll(".class1"), function(element) {
element.className += " class2";
});
querySelectorAll works on all modern browsers, and also IE8. It accepts a CSS selector and returns a list of matching elements. Then, in the above, I loop over the list by borrowing Array#forEach, which is happy to loop through array-like things like the lists from querySelectorAll.
I should mention that if you want to use forEach on IE8, you'll need a polyfill for it. Or of course, use a boring old loop:
var list = document.querySelectorAll(".class1");
var n;
for (n = 0; n < list.length; ++n) {
list[n].className += " class2";
}
Or if you only want to do it if they're inside a .foo1:
[].forEach.call(document.querySelectorAll(".foo1 .class1"), function(element) {
element.className += " class2";
});
Or only direct children of a .foo1:
[].forEach.call(document.querySelectorAll(".foo1 > .class1"), function(element) {
element.className += " class2";
});
Suggested reading:
MDN
DOM
CSS Selectors
In case you're using jQuery and forgot to tag it (hey, it happens):
All:
$(".class1").addClass("class2");
Only inside a .foo1:
$(".foo1 .class1").addClass("class2");
Or only direct children of a .foo1:
$(".foo1 > .class1").addClass("class2");

To get all the elements with that class:
var elements = document.getElementsByClassName('class1');
Then loop over them:
for (var i = 0; i < elements.length; i++)
You need to concat the values:
element.className += ' class2';
So the full code looks like this:
var elements = document.getElementsByClassName('class1');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.className += ' class2';
}
Example (.class2 elements have red colour):
var elements = document.getElementsByClassName('class1');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.className += ' class2';
}
.class2 {
color: red
}
<div class="class1">1</div>
<div class="class1">2</div>
Or, if your browser supports classList (as most modern browsers do), then something like this will work as well:
element.classList.add('class2');
AFTER THE QUESTION UPDATE
but since this is a click event, it temporarily adds the second class but when page is reloaded , it has disappeared. I need to implement it via a click event. How do I do it?
Ideally, you'd use a server-side language to maintain changed classes after a page reloads. Normally, when you reload a page, your whole DOM reloads (including the classes).
There is a client-side solution, but not recommended: use a storage mechanism, like sessionStorage, localStorage, or plain old cookie, to keep track of click events. And then, when you render the page, simply check the storage for those click events you tracked, and adjust classes accordingly using the code above.
Why not recommended? Because this is a way of faking a server-side behaviour using a client-side language. Ideally, if you want to keep things on the client, you'd avoid the page reload completely and have everything happen on a single page (like SPAs do). But I'm afraid I can't tell you much more unless you provide more details about what are you trying to do.
Here's a super-simple example using localStorage, note how it keeps the class settings after a refresh:
http://jsfiddle.net/73efLsht/

Javascript Click on Element by Class

So I am writing a script that can be run on a page but I want to click on this element, unfortunately, it does not have an id to get and I am trying to use the .click() function on it, but it doesn't work, here's what I have, anyone know how to fix it? This is the only element in the class also
var classes = document.getElementsByClassName('rateRecipe btns-one-small');
var Rate = classes[0];
Rate.click();

I'd suggest:
document.querySelector('.rateRecipe.btns-one-small').click();
The above code assumes that the given element has both of those classes; otherwise, if the space is meant to imply an ancestor-descendant relationship:
document.querySelector('.rateRecipe .btns-one-small').click();
The method getElementsByClassName() takes a single class-name (rather than document.querySelector()/document.querySelectorAll(), which take a CSS selector), and you passed two (presumably class-names) to the method.
References:
document.getElementsByClassName().
document.querySelector().

If you want to click on all elements selected by some class, you can use this example (used on last.fm on the Loved tracks page to Unlove all).
var divs = document.querySelectorAll('.love-button.love-button--loved');
for (i = 0; i < divs.length; ++i) {
divs[i].click();
};
With ES6 and Babel (cannot be run in the browser console directly)
[...document.querySelectorAll('.love-button.love-button--loved')]
.forEach(div => { div.click(); })

for exactly what you want (if you know the index of button):
var rate = document.getElementsByClassName('rateRecipe btns-one-small')[0];
rate.click();
or for direct action
document.getElementsByClassName('rateRecipe btns-one-small')[0].click();
with jQuery
$('.rateRecipe .btns-one-small').click(function(){
var vIndex = $('.rateRecipe .btns-one-small').index(this);
//vIndex is the index of buttons out of multiple
//do whatever
//alert($(this).val());//for value
});

class of my button is "input-addon btn btn-default fileinput-exists"
below code helped me
document.querySelector('.input-addon.btn.btn-default.fileinput-exists').click();
but I want to click second button, I have two buttons in my screen so I used querySelectorAll
var elem = document.querySelectorAll('.input-addon.btn.btn-default.fileinput-exists');
elem[1].click();
here elem[1] is the second button object that I want to click.

Can't select child elements using getElementsByTagName

Here is the HTML code:
<span class="holder">
Navigate
</span>
I want to select all such tags with class holder and then under these holders I want to change href of a tag.
What I have tried:
var holders = document.getElementsByClassName('holder'),
i = holders.length;
while(i--) {
holders[i].getElementsByTagName('a').href = "http://www.google.com";
}
But the above code does not work. It does not change the href from /menu/page1 to my custom link. What am I doing wrong?
As I am working with some external web page,I cannot use jquery.
Only Javascript solutions please.
Thank You.

getElementsByTagName returns elements collection, if you want to get the first link, use .getElementsByTagName('a')[0]

As the perent element may contain multiple instances of a same tag, so getElementsByTagName returns a collection of the elements/nodes
So, you have to process it like an array. Bellow is one of the best way to do this
var holders = document.getElementsByClassName('holder'),
i = holders.length;
while(i--) {
var anchors = holders[i].getElementsByTagName('a');
for (var j = 0; j < anchors.length; j++) {
anchors[j].href="'http://www.google.com";
}
}
Demo Fiddle

How can I apply a function to several images in jQuery?

I need a little help with (probably) something really simple.
I want to use a script which converts images from color to grayscale.
I got it working partially — the first image turns gray, but the second won’t.
I know this is because an id cannot be used multiple times:
var imgObj = document.getElementById('grayimage');
I tried this:
var imgObj = $(’.grayimage’)[0];
But it didn’t work. Changing it to getElementByClass also does not work. (Before people ask, I did change the id to class in the <img> tag.)
I really could use some help here. Thanks in advance!

$('.grayimage').each(function(idx,imgObj){
<do your code here>
});

$('.grayimage') gives you a list of all elements with grayimage as a class. If you add '[0]' you're accessing the first element, so any changes you make will apply to only the first image that it finds with this class.
You should loop through all elements:
var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
var image = images[i];
// Do stuff
}