We Keep Coding

Clicking a <li> element with javascript

I'm making a chrome extension and one of the features is to click on one of the items in the list code below.
<ul class="js-tweet-actions tweet-actions full-width ">
<li class="tweet-action-item pull-left margin-r--13 "> <a class="tweet-action " href="#" rel="retweet"> <i class="js-icon-retweet icon icon-retweet icon-retweet-toggle txt-center"></i> <span class="is-vishidden">Retweet</span> </a> </li>
<li class="tweet-action-item pull-left margin-r--13 margin-l--1"> <a class="js-show-tip tweet-action position-rel" href="#" rel="favorite" title="" data-original-title=" Like from ILoveTomFan "> <i class="js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center"></i> <span class="is-vishidden"> Like </span> </a> </li>
</ul>
How would I mimic a browser click on these elements, the code below is what I tried and it has no effect at all, it doesnt correctly click the element that is being displayed.
I have tried;
document.getElementsByClassName("js-show-tip tweet-action position-rel").click;
document.getElementsByClassName("tweet-action-item pull-left margin-r--13 margin-l--1").click;
document.getElementsByClassName("js-icon-favorite icon icon-favorite icon-favorite-toggle txt-center").click;
var test = x[y].querySelectorAll("li");
test[2].click;
Thanks #Zevee specially the code that made this work was
x[y].querySelector('.js-show-tip.tweet-action.position-rel').click();

Your first three don't work because there is an array of elements and because classname only takes one class (iirc)
Try document.querySelector(<here, put every single class that you want to select seperated by dots (in a string)>).click()
Note that this selects the first element with all of those classes (iirc)

Swap <div> content from pure css menu

I'm trying to fix my jquery issue where I swap content from separate html pages stored in multiple sub folders. My menu has over 100 link items that I need to work with on my site. Links 1-4 work well and swap without issue but any beyond that cease to function. The initial code I sourced off the net. Just not sure why it's not working fully as I need all 100+ links active. Any help would be much appreciated and thanks in advance.
The below code is part of the CSS menu. link1, link2, link3, and link4 all work as they should but beyond that nothing seems to function.
<ul>
<li>
<a id="link1" href="#" onmouseover="roll('but1', 'images/blueeye/blueeye_b1_over.png')" onmouseout="roll('but1', 'images/blueeye/blueeye_b1.png')">
<img alt="Home" src="images/blueeye/blueeye_b1.png" name="but1" class="style3" /></a>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but2', 'images/blueeye/blueeye_b2_over.png')" onmouseout="roll('but2', 'images/blueeye/blueeye_b2.png')">
<img alt="Worship Programs" src="images/blueeye/blueeye_b2.png" name="but2" class="style3" /></a>
<ul style="width: 170px">
<li><a id="link2" href="#">Our Worship Program</a></li>
<li><a id="link3" href="#">Sabbath School</a></li>
<li><a id="link4" href="#">Divine Service</a></li>
</ul>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but3', 'images/blueeye/blueeye_b3_over.png')" onmouseout="roll('but3', 'images/blueeye/blueeye_b3.png')">
<img alt="Sabbath School" src="images/blueeye/blueeye_b3.png" name="but3" class="style3" /></a>
<ul style="width: 160px">
<li><a id="link5" href="#">Current Lesson</a></li>
<li><a id="link6" href="#">Mission Story</a></li>
<li><a id="link7" href="#">Adult Lessons</a></li>
<li><a id="link8" href="#">PowerPoint Helps</a></li>
<li><a id="link9" href="#">Picture Memory Verses</a></li>
</ul>
</li>
</ul>
The below javascript is the swapping. As stated above link1-link4 all function but link5 onwards doesn't.
Code begins here:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#link1").click(function(){$("#site_content").load("homepage.htm");});
$("#link2").click(function(){$("#site_content").load("about/worship-program.htm");});
$("#link3").click(function(){$("#site_content").load("about/ss_worship.htm");});
$("#link4").click(function(){$("#site_content").load("about/div_worship.htm");});
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
$("#link11").click(function(){$("#site_content").load("");});
$("#link12").click(function(){$("#site_content").load("");});
$("#link13").click(function(){$("#site_content").load("");});
$("#link14").click(function(){$("#site_content").load("");});
</script>

please check that #site_content_ss exists,
unexpected identifier
this part:
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
should be this:
$("#link10").click(function(){$("#site_content").load("kjv_bible/kjv_bible.htm");});
I'd create a example https://jsbin.com/muvoyuredu/edit?html,js,output
UPDATE
if you would to swap content into #site_content
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
should be this:
$("#link5").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
if you want stay on selected div block on refresh
href # change to #id (e.g. href="#link1" )
get id in the query string than auto click this link
I'd create a example https://jsbin.com/cocuvaraqu/edit?html,js,output

How to load HTML into a single div using tabs

I had script setup to toggle show/hide divs on a page with menu items.
However I wanted to load external HTML into one of them and was running into issues.
Now I am wanting to just having the menu items load external HTML into a single div.
I can't seem to make it work though and I want to have a menu like this:
<div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>
Each item loads a different HTML into a div like this using jQuery:
<article>
<div id="bodycontent">
...
</div>
</article>

If you want to add or means to say load external html then you need to add some java scrip.Let take your example.
<div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>
See I've added individual id to each now you need to call a load function of js
$("#homeTab").on('click',function(){
//firstly clear html part
$('#bodycontent').html('');
$('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});
That's it all done you can do like this.
Hope it will work for you.

Replace the href to something else using jQuery or javascript

This is the HTML i have and i want to change the href attribute from http://google.com to something else, please note that this link should not be changed http://google.com/home/inner_links. I cannot edit the html so looking for a solution using jQuery or Javascript. Thanks.
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>

Problems with the code fragment
First off, it is not a full document but a code fragment, as such it doesn't include appropiate headers. We can disregard this understanding that the provided code belongs to a larger document.
The following problems are present in such code fragment:
The img tags require a non-empty src attribute and a alt attribute.
The a tags require a valid url value in their href attribute.
There doens't seem to be a closing tag for <a href="http://">
And finally thig thing that doesn't make sense <li<a href="http://google.com/home/inner_links">
Now, this is beyond the question, but given that you have the following fragment:
<div class="main-menu">
<ul><li</li></ul>
</div>
We can see that you have closing li and ul tags. So I would expect that you were trying to do as follows:
<div class="main-menu">
<ul><li></li></ul>
</div>
Solution
The code I'm suggesting to use to edit the href values is the following:
$('.branding').find('img').parent().attr('href', 'newhref');
That is selecting the parents of all the img that are inside elements with class "branding", and setting the href attribute of them.
Demo with original code fragment
$('.branding').find('img').parent().attr('href', 'newhref');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>
Demo with the code fragment and suggested fixes
$('.branding').find('img').parent().attr('href', 'newhref');
<!DOCTYPE html><head><title>demo</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<div class="branding">
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
link
<div class="main-menu">
<ul><li>link</li></ul>
</div>
</div>
Notes: In addition to the fixes, I have create a complete document from the fragment, set the title to "demo", used lorempixel for the images, set the invalid url to http://example.com and added the text "link" to the anchors to ease the demo.

jquery:
$('.branding a').attr('href', YOUR VALUE)
or
$('a[href="http://google.com"]').attr('href', YOUR VALUE)

The html at Question is invalid.
<div class="branding"> <!-- 1) where is closing tag for this `DIV` element? -->
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu"><!-- 2) where is closing tag for this `DIV` element? -->
<!-- `UL` is not permitted child of `A` element -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a -->
<ul><li</li></ul>
</div><!-- is this closing `DIV` tag for 1) or 2) ? -->
That should be changed before changing the href at the invalid html. If you cannot change html yourself, you should ask whomever supplied the html why it is delivered invalid; and ask that it be changed to valid html before proceeding.
Then adjust href of <a> elements.

jquery:
$(document).ready(function() {
$("img").parent().attr("href", some url);
});

Here a sample code- I had a similar requirement in my project.. you can change based on your need.
Note: alert() - is for demo purpose only.
$(document).ready(function(e) {
var currentUrl= $("a").attr('href');
newEditUrl = currentUrl.replace("http://google.com", "http://google.com/home/inner_links");
alert(newEditUrl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://">
<div class="main-menu">
<ul>
<li<a href="http://google.com/home/inner_links">
</a>
</li>
</ul>
</div>
Hope this helps.

Try something like this,
function changeHref(){
document.getElementsByTagName("a").href="Someplace.com";
}
Also, which link do you want to change specifically? Or do you want to change all of them?

Can you change a link title by named title attribute?

I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>

Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");