Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <ul>
    <li class="item">My List Element 1</li>
    <li class="item">My List Elements 2</li>
</ul>
</body>
</html>
 
.item {
    color: white;
    padding: 10px;
    width: 200px;
    margin-bottom: 10px;
}
li {
    background:red;
}
li:hover {
    background:blue;
}
.bg-yellow {
    background:yellow;
}
 
var listEls = document.getElementsByTagName("li");
function addYellowClass() {
  this.classList.add('bg-yellow');
}
for (var i = 0; i <= listEls.length - 1; i++) {
  listEls[i].onclick = addYellowClass;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers