Develop Reference

Adding onClick function to select elements

I have a select tag of dynamically added elements. I need to add an event listener to each of the elements in the select tag except the first which:
adds the text of the element to a list,
makes the focus of the list the first element again, and
removes or hides the clicked element.
The first element is a 'none' element which doesn't need any event listener.
I've tried something like
for (var i = 0; i < array.length; i++)
{
var name = array[i];
var selectElement = document.getElementById(selectElementId);
addToSelectNode(document.getElementById(selectElementId), name);
var thisNode = selectElement.childNodes[i];
if (thisNode.value != "none")
{
thisNode.addEventListener("click", function(event)
{
appendNodeToList("artist-list", i);
selectElement.selectedIndex = 0;
selectElement.remove(selectElement.i);
selectElement.style.display = "none";
});
}
}
function addToSelectNode(element, optionText)
{
var newSelectElement = document.createElement("option");
newSelectElement.text = optionText;
element.add(newSelectElement);
}
function appendNodeToList(listId, text)
{
var newNode = document.createElement("LI");
var textNode = document.createTextNode(text);
newNode.appendChild(textNode);
document.getElementById(listId).appendChild(newNode);
}
Didn't work at all though

A few hours later I've solved my own question. The problem stemmed from trying to remove items in the select tag which just wasn't working - I'm nut sure if it's possible but making it disabled solved it. Anyway here's the result.
HTML:
<select id="artist-select-list">
<option value="none">none</option>
</select>
JavaScript:
window.onload = function()
{
var dropdown = document.getElementById("sampleDropdown");
var n = array.length;
// Loop to add to <select> dropdown
for (var i = 1; i <= n; i++)
{
addToSelectNode(dropdown, array[i - 1]);
}
// Loop to add id's to each element in the dropdown
for (var i = 0; i <= n; i++)
{
dropdown[i].id = "selectNum" + i;
}
// Loop to add event listener
for (var i = 0; i < dropdown.length; i++)
{
dropdown[i].addEventListener("click", function(event)
{
// Regardless of which option the user clicks move shown option to "none" (first index in dropdown)
dropdown.selectedIndex = 0;
if (event.target.id != "selectNum0")
{
// Disable once clicked
event.target.disabled = true;
// Do other things here in relation to event.target
}
});
}
}
var array =
[
"sampleText1", "sampleText2"
];
function addToSelectNode(element, optionText)
{
var newSelectElement = document.createElement("option");
newSelectElement.text = optionText;
element.add(newSelectElement);
}

How can I change the content of the "h1" tag of an html page using javascript?

I need to change the content of all "h1" tags in my html file when the page load using javascript.
So I write the following code
window.onload = function () {
var h1html = document.createElement("h1");
var h1htmltext = document.createTextNode("header 1");
h1html.appendChild(h1htmltext);
document.getElementsByTagName("h1").appendChild(h1html);
};

If you're sure you only have one h1 tag you could simply do
window.onload = function () {
document.getElementsByTagName("h1")[0].innerHTML = "header 1";
}
if multiple h1 tags are present you could do
window.onload = function () {
var h1Elems = document.getElementsByTagName("h1");
var pos;
for (pos in h1Elems) {
h1Elems[pos].innerHTML = "header 1";
}
}

Use this:
for(var i = 0, elems = document.getElementsByTagName('h1'); i < elems.length; i++) {
elems[i].innerHTML = "new";
}
fiddle

You need to change the innerHTML of each elements, as such
function changeall(){
var headers=document.getElementsByTagName("h1");
var newheadertext="hello";
for(var i in headers){
headers[i].innerHTML=newheadertext;
}
}

getElementsByTagName returns a node list; you need to loop through it.
var headers = document.getElementsByTagName("h1");
for(var i = 0; i < headers.length; i++) {
var header = headers[i];
var text = document.createTextNode("header 1");
while(header.childNodes.length) {
header.removeChild(header.firstChild);
}
header.appendChild(text);
}
I made a few assumptions there:
You don’t actually want to nest headers
You want to replace the content
You want an old-standards-compliant way
If you don’t need support for old browsers, just use textContent:
var headers = document.getElementsByTagName("h1");
for(var i = 0; i < headers.length; i++) {
headers[i].textContent = "header 1";
}

Changing classes in a menu with Javascript

I am looking to create a very simple functionality of clicking on a menu tab and it changes color to let you know what page you are on. I am a novice so please take it easy on me...lol
/Menu in php header file/
<ul class="tabs" id="tabs">
<li class="selected">Home</li>
<li class="inactive">Bio</li>
<li class="inactive">Photo</li>
<li class="inactive">Thank</li>
<li class="inactive">Contact</li>
</ul>
/*This is the JavaScript file*/
window.onload = initPage;
function initPage() {
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i<tabs.length; i++){
var links = tabs[i];
links.onclick = tabClicked;
}
}
function tabClicked(){
var tabId = this.id;
document.getElementById(tabId).classList.toggle("selected");
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; i++){
var currentTab = tabs[i];
if (currentTab.id !== tabId){
currentTab.class = "selected";
} else {
currentTab.class = "inactive";
}
}
}

element.setAttribute("class", "className");

You are using ids in your code but you don't have provided it in your markup. so give ids to li elements and try this.
function tabClicked(){
var tabId = this.id;
document.getElementById(tabId).classList.toggle("selected");
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; i++){
var currentTab = tabs[i];
if (currentTab.id !== tabId){
currentTab.className = "inactive";
} else {
currentTab.className= "selected";
}
}
}
JS Fiddle Demo

Store a reference to each of the list items.
Create a variable to keep track of the current tab.
In an onclick function for each element (or you could use one onclick and just use some conditions), change the class attribute of the element by using the setAttribute() method.
Like this:
function onFirstTabClick() {
clearSelected();
tabVariable1.setAttribute("class","some-new-class");
}
function() clearSelected() {
switch(currentSelectedTrackerVariable) {
case 1: tabVariable1.setAttribute("class","some-new-class");
break;
// Do this for the amount of tabs that you have.
}
}

Working FIDDLE Demo
There is no need to define functions globally. Write all them in one package. The code below, works correctly with your HTML markup.
<script>
window.onload = function () {
var tab = document.getElementById('tabs');
var lis = tab.getElementsByTagName('li');
for (var i = 0, l = lis.length; i < l; i++) {
lis[i].onclick = function () {
for (var j = 0; j < l; j++) {
lis[j]["className"] = "inactive";
}
this["className"] = "selected";
};
}
};
</script>

If you use jQuery, then tabClicked can run:
jQuery('.selected').removeClass('selected').addClass('inactive');
jQuery(this).removeClass('inactive').addClass('selected');

Is there a way to show these hidden element with mouseover?

In my html code I have a list of these <li> elements:
<li class="liitem" id="183"><span> Google </span><br>
<ul><li><span>gmail.com </span><span id="183" style="float:right;display:none;">delete</span></li></ul></li>
I want this:
When there is a mouseover on a <li> element of the "liitem" class, then set display:block of the span with the same id ( 183 in this case ).
I have writed this code but it's incomplete and I don't know how to do:
var elms = document.getElementsByTagName('li');
for (var i = 0; i < elms.length; i++){
if (elms[i].getAttribute('class') === 'liitem'){
elms[i].onmouseover = function(){
//set display:block
}
elms[i].onmouseout = function(){
//set display:none
}
}
}

you have set an id with the same value id should be unique. so you could add a value to the id to make it diferent for the liitem's id. like.
Just make sure there is no space to be safe between the a and span.
<ul>
<li class="liitem" id="183"><span> Google </span><br>
<ul><li><span>gmail.com</span><span style="float:right;display:none;">delete</span></li></ul>
<ul><li><span>docs</span><span style="float:right;display:none;">delete</span></li></ul>
</li>
</ul>
.
var elms = document.getElementsByTagName('li'),
emls_len = elms.length;
for (var i = 0; i < emls_len; i++){
if (elms[i].className == 'liitem'){
var arr_sub_uls = document.getElementById(elms[i].id).getElementsByTagName('ul');
// for each UL within the liitem
for (var j = 0; j < arr_sub_uls.length; j++){
// assign id's to the span around delete
var actionis = arr_sub_uls[j].childNodes[0].childNodes[1].id = elms[i].id + "_" + j; // elms[i].id is the liitem id and j is the number of uls'
// attach the event handler
addEventHandler(arr_sub_uls[j].childNodes[0],actionis)
}
}
}
function addEventHandler(s, actionis){
s.onmouseover = function(){ document.getElementById(actionis).style.display = "block" }
s.onmouseout = function(){ document.getElementById(actionis).style.display = "none" }
}
see fiddle: http://jsfiddle.net/EW2cm/1/

You can do this:
elms[i].style.display = "block";
and
elms[i].style.display = "none";

Append an Array to an Unordered List

What I'm trying to accomplish with this code is to output the array alphabet as a series of list items into an existing unordered list in the actual markup. I've got the array into list items, but I can't figure out how to tell it to append itself to an existing unordered list <ul id="itemList"></ul>.
var itemsExist = true;
var indexNum = 0;
var unorderedList = document.getElementById('itemList');
var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
function write_letters(){
for (i = 0; i < alphabet.length; i++ ) {
document.write('<li>' + alphabet[indexNum++] + '</li>');
}
}
if (itemsExist){
write_letters();
} else {
document.write("error!");
}

Don't use document.write to do it. You should act like this:
function write_letters(){
var letters = "";
for (var i = 0; i < alphabet.length; i++ ) {
//Also I don't understand the purpose of the indexNum variable.
//letters += "<li>" + alphabet[indexNum++] + "</li>";
letters += "<li>" + alphabet[i] + "</li>";
}
document.getElementById("itemList").innerHTML = letters;
}
More proper way is to use DOM (in case you want full control of what's coming on):
function write_letters(){
var items = document.getElementById("itemList");
for (var i = 0; i < alphabet.length; i++ ) {
var item = document.createElement("li");
item.innerHTML = alphabet[i];
items.appendChild(item);
}
}

You can use a combination of createElement() and appendChild() to add new HTML elements within another HTML element. The code below should work for you:
<html>
<head>
<title>Script Test</title>
</head>
<body>
<ul id="itemList"></ul>
</body>
<script>
var itemsExist = true;
var indexNum = 0;
var unorderedList = document.getElementById('itemList');
var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
var myElement;
function write_letters(){
for (i = 0; i < alphabet.length; i++ ) {
// Create the <LI> element
myElement = document.createElement("LI");
// Add the letter between the <LI> tags
myElement.innerHTML = alphabet[indexNum++];
// Append the <LI> to the bottom of the <UL> element
unorderedList.appendChild(myElement);
}
}
if (itemsExist){
write_letters();
} else {
document.write("error!");
}
</script>
</html>
Note how the script exists below the body tag. This is important if you want your script to work the way you wrote it. Otherwise document.getElementById('itemList') will not find the 'itemList' ID.

Try to reduce the actions on the DOM as much as possible. Every appendChild on unorderedList forces the browser to re-render the complete page. Use documentFragement for that sort of action.
var frag = document.createDocumentFragment();
for (var i = alphabet.length; i--; ) {
var li = document.createElement("li");
li.appendChild(document.createTextNode(alphabet[indexNum++]));
frag.appendChild(li);
}
unorderedList.appendChild(frag);
So there will be only one DOM action which forces a complete redraw instead of alphabet.length redraws