Develop Reference

Attach href to a class individually

So I want to use Javascript to add three different href links to a class of 3 < li >
However I can't really get it to work properly.
I'm sorry for my short explanation and poor english, but I really don't know how to explain it any better.
I have googled away searching for a solution, but I can only find how to do it when you're not using a class.
HTML
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>
JS
var links = document.getElementsByClassName("navigation");
links[0].setAttribute('href', 'www.google.se');
I want to take the class named navigation and add an href link to the < li >.

The li element doesn't have an href attribute. It's a list item, not an anchor.
You can use document.createElement to create an a element, then move the text node inside the list item into it, then append the a element to the li element, then add an href attribute to it.
const listitems = document.querySelectorAll('li');
Object.values(listitems).forEach(item => {
const text = item.firstChild;
const link = document.createElement('a');
link.setAttribute("href", "http://google.com");
item.appendChild(link);
link.appendChild(text);
});
<ul>
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>

the li text, dont have click effect, so you add the link tag <a></a>
var links = document.getElementsByClassName("navigation");
links[0].setAttribute('href', 'www.google.se'); //edit the url
links[1].setAttribute('href', 'www.google.se');
links[2].setAttribute('href', 'www.google.se');
<ul>
<li ><a class="navigation">HTML</a></li>
<li ><a class="navigation">DOM</a></li>
<li ><a class="navigation">Javascript<a/></li>
</ul>

var link1 = document.getElementsByClassName("navigation1");
var link2 = document.getElementsByClassName("navigation2");
var link3 = document.getElementsByClassName("navigation3");
link1[0].setAttribute('href', 'www.google.com');
link2[0].setAttribute('href', 'www.yahoo.com');
link3[0].setAttribute('href', 'www.test.com');
<ul>
<li>
<a class="navigation1">HTML</a>
</li>
<li>
<a class="navigation2">DOM</a>
</li>
<li>
<a class="navigation3">Javascript</a>
</li>
</ul>

Clicking on a list of <li> only works on the first one

I have few li elements and I want each of them to be clickable. This is what I have:
<li id="stream-object" data-stream="val1">
<li id="stream-object" data-stream="val2">
<li id="stream-object" data-stream="val3">
and my jquery
$("#stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
});
But this only works on the first li.

This is expected behavior as ID's in HTML must be unique, You can use a common class then use Class Selector (“.class”)
Selects all elements with the given class.
HTML
<li class="stream-object" data-stream="val1">
<li class="stream-object" data-stream="val2">
<li class="stream-object" data-stream="val3">
Script
$(".stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
});

ID (#) must be unique for page use clasess (.) instead
<li class="stream-object" data-stream="val1">
<li class="stream-object" data-stream="val2">
<li class="stream-object" data-stream="val3">
$(".stream-object").click(function(){});

An id should be unique. Instead use classes
$(".stream-object").click(function(){
var stream_link=$(this).data("stream");
$("#main_stream").attr("data",stream_link);
alert( $(this).html()+' is clicked' );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="stream-object" data-stream="val1">Item 1</li>
<li class="stream-object" data-stream="val2">Item 2</li>
<li class="stream-object" data-stream="val3">Item 3</li>
</ul>

How can I get this href value?

I would like to get the value "3 Sent" from the hmtl below. How can I do this?
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
EDIT: Apologies everyone, I wasn't clear on what I was after.
The value "3 Sent" changes all the time, can be "1 Sent, 2 Sent" etc. It is a clickable link so I want to be able to click on it.,
Thanks.

Possible with xpath text based search. I believe you are looking for a selector
//a[.='3 Sent']
Edit
Just simply use css selector then,
a[href='#sent']

Try this
The anchor tag when gets clicked it search for the text
$('.nav li a').on('click', function(e){
e.preventDefault();
console.log("Value is " + $(this).text());
});

You can simply get it using below code:
$(document).ready(function(){
$('li').find('a').each(function() {
if($(this).attr('href')=="#sent")
{
alert($(this).text());
}
});
});
Here is JSFiddle

From the class .active in the next list element get the text in anchor.
var textInAnchor = document.querySelector(".active + li a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
from the class .some-tabs find the child list element in the second position then return his anchor text
var textInAnchor = document.querySelector(".some-tabs > li:nth-child(2) a").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>
Get the href with value = #sent the return the text
var textInAnchor = document.querySelector("[href='#sent']").innerHTML;
alert(textInAnchor)
<ul class="nav nav-tabs some-tabs">
<li class="active">
1 Accepted
</li>
<li class="">
3 Sent
</li>
</ul>

How to add a class to an element using jQuery and javascript?

I have the HTML code as given below to add the navigation to my site. (Note that the list is nested)
<div id="navigation">
<ul>
<li>Home</li>
<li>About us</li>
<li>Help</li>
<li>DropDown
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li class="last">A Last Link Text</li>
</ul>
</div>
I want to show the currently active page link in new color. So the corresponding list item should have the class active and I use the CSS to change the color. For example, if the default.html is the currently opened page, the code should be <li class=“active”>Home</li>.
How to do that in jQuery and JavaScript (I need both for two different websites).
Can anyone help me?
Thanks for your help.

Get your URL / Parse it:
var pathname = window.location.pathname;
Then add the class:
Jquery:
$(element).addClass('classname');
JS: How do I add a class to a given element?

Try this
$(document).ready(function () {
var url = location.href;
$('#navigation li a').each(function () {
var thisHref = this.getAttribute('href');
if (thisHref !== '#' && url.indexOf(thisHref) !== -1) {
$(this.parentNode).addClass('active');
return;
}
});
});

Append to element is not working

I have the following HTML:
<textarea class="input" placeholder="Tap to enter message" maxlength="160"></textarea>
<div class="keyboard">
<ul id="special">
<li data-letter="!">!</li>
<li data-letter="?">?</li>
<li data-letter=",">,</li>
<li data-letter=":">:</li>
<li data-letter=";">;</li>
</ul>
<ul id="first">
<li data-letter="q">q</li><li>1</li>
<li data-letter="w">w</li><li>2</li>
<li data-letter="e">e</li><li>3</li>
<li data-letter="r">r</li><li>4</li>
<li data-letter="t">t</li><li>5</li>
<li data-letter="y">y</li><li>6</li>
<li data-letter="u">u</li><li>7</li>
<li data-letter="i">i</li><li>8</li>
<li data-letter="o">o</li><li>9</li>
<li data-letter="p">p</li><li>0</li>
</ul>
<ul id="second">
<li data-letter="a">a</li>
<li data-letter="s">s</li>
<li data-letter="d">d</li>
<li data-letter="f">f</li>
<li data-letter="g">g</li>
<li data-letter="h">h</li>
<li data-letter="j">j</li>
<li data-letter="k">k</li>
<li data-letter="l">l</li>
</ul>
<ul id="third">
<li id="caps" class="pointer">⇧<span id="underline" class="color">_</span></li>
<li data-letter="z">z</li>
<li data-letter="x">x</li>
<li data-letter="c">c</li>
<li data-letter="v">v</li>
<li data-letter="b">b</li>
<li data-letter="n">n</li>
<li data-letter="m">m</li>
<li><img src="backspace.png"></li>
</ul>
<ul id="fourth">
<li class>?123</li>
<li>,</li>
<li> </li>
<li>.</li>
<li><img src="search.png"></li>
</ul>
with the following javascript:
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').append(data);
});
What I want to have happen is when I click on one of the list items, I want the data-letter to insert itself into the input, sorta like an onscreen keyboard. But it isn't working. Can someone help me?
Here is a Fiddle
Update
This works now
My next problem is the uppercase button. When I click the button, the characters turn to uppercase. How would I use the data to inject an uppercase letter into the input?
The final problem is the first row of letters won't inject into the input. How do I fix this?

Try the below
Enable Jquery file instead of mootools in the fiddle
Thanks

Try:
Demo
$('.keyboard ul li').click(function() {
var data = $(this).data('letter');
$('.input').val( $('.input').val()+ data);
});​

All you have to do is remove the margin on the .input element (it's offscreen for me), and enable jquery on the jsfiddle. After that it works fine for me.

Not sure why jquery .data() not work, but you can use below "this.dataset.xxx"
var data = this.dataset.letter;

This is the solution I came up with
keys = $(".keyboard ul li");
keys.on("click", function() {
var let = $(this).text(),
upperlet = let.toUpperCase(),
lowerlet = let;
if (keys.hasClass("uppercase")){
input.append(upperlet);
}else {
input.append(lowerlet);
}
});
Instead of having the data-letter attribute for every single list-item, I got the text using this function, and appended it on click. This now also accounts for the uppercase letters as well.