JavaScript - Get Elements By Tag Issue

I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks.
Code:

<script type="text/javascript">

Array.prototype.sum = function() {
for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]);
return sum;
}

var myArray=[1,2,3,4,5];

document.write(myArray.prototype.sum);

</script>

I have a webpage which has the prototype library in it as well as my own script. I just started on it, but I've already run into issues using the for... in loop. I'll admit, I'm a complete noob at javascript, so this is probably something pretty simple.
Code:

function prepareToolBar()
{
	//define toolbar tool names
	var toolbar = [
		'line',
		'circle',
		'ellipse',
		'square',
		'rectangle',
		'text'];
	
	for (var i in toolbar)
	{
		var tmp = document.createElement("p");
		tmp.appendChild(document.createTextNode(toolbar[i]));
		document.body.appendChild(tmp);
	}
}
addLoadEvent(prepareToolBar);

function addLoadEvent(func)
{
	var oldonload = window.onload;
	if (typeof oldonload != 'function')
	{
		window.onload = func;
	} else {
		window.onload = function() { oldonload(); func(); }
	}
}

Below is the output on the page from the function:
Code:

circle

ellipse

square

rectangle

text

function (iterator, context) { var index = 0; iterator = iterator.bind(context); try { this._each(function (value) {iterator(value, index++);}); } catch (e) { if (e != $break) { throw e; } } return this; }

function (number, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var index = - number, slices = [], array = this.toArray(); while ((index += number) < array.length) { slices.push(array.slice(index, index + number)); } return slices.collect(iterator, context); }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = true; this.each(function (value, index) {result = result && !!iterator(value, index);if (!result) {throw $break;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result = false; this.each(function (value, index) {if ((result = !!iterator(value, index))) {throw $break;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; this.each(function (value, index) {results.push(iterator(value, index));}); return results; }

function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }

function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }

function (filter, iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var results = []; if (Object.isString(filter)) { filter = new RegExp(filter); } this.each(function (value, index) {if (filter.match(value)) {results.push(iterator(value, index));}}); return results; }

function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }

function (number, fillWith) { fillWith = Object.isUndefined(fillWith) ? null : fillWith; return this.eachSlice(number, function (slice) {while (slice.length < number) {slice.push(fillWith);}return slice;}); }

function (memo, iterator, context) { iterator = iterator.bind(context); this.each(function (value, index) {memo = iterator(memo, value, index);}); return memo; }

function (method) { var args = $A(arguments).slice(1); return this.map(function (value) {return value[method].apply(value, args);}); }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value >= result) {result = value;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var result; this.each(function (value, index) {value = iterator(value, index);if (result == null || value < result) {result = value;}}); return result; }

function (iterator, context) { iterator = iterator ? iterator.bind(context) : Prototype.K; var trues = [], falses = []; this.each(function (value, index) {(iterator(value, index) ? trues : falses).push(value);}); return [trues, falses]; }

function (property) { var results = []; this.each(function (value) {results.push(value[property]);}); return results; }

function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (!iterator(value, index)) {results.push(value);}}); return results; }

function (iterator, context) { iterator = iterator.bind(context); return this.map(function (value, index) {return {value: value, criteria: iterator(value, index)};}).sort(function (left, right) {var a = left.criteria, b = right.criteria;return a < b ? -1 : a > b ? 1 : 0;}).pluck("value"); }

function () { return [].concat(this); }

function () { var iterator = Prototype.K, args = $A(arguments); if (Object.isFunction(args.last())) { iterator = args.pop(); } var collections = [this].concat(args).map($A); return this.map(function (value, index) {return iterator(collections.pluck(index));}); }

function () { return this.length; }

function () { return "[" + this.map(Object.inspect).join(", ") + "]"; }

function (iterator, context) { iterator = iterator.bind(context); var result; this.each(function (value, index) {if (iterator(value, index)) {result = value;throw $break;}}); return result; }

function (iterator, context) { iterator = iterator.bind(context); var results = []; this.each(function (value, index) {if (iterator(value, index)) {results.push(value);}}); return results; }

function (object) { if (Object.isFunction(this.indexOf)) { if (this.indexOf(object) != -1) { return true; } } var found = false; this.each(function (value) {if (value == object) {found = true;throw $break;}}); return found; }

function () { return this.map(); }

function reverse() { [native code] }

function forEach() { [native code] }

function () { this.length = 0; return this; }

function () { return this[0]; }

function () { return this[this.length - 1]; }

function () { return this.select(function (value) {return value != null;}); }

function () { return this.inject([], function (array, value) {return array.concat(Object.isArray(value) ? value.flatten() : [value]);}); }

function () { var values = $A(arguments); return this.select(function (value) {return !values.include(value);}); }

function (sorted) { return this.inject([], function (array, value, index) {if (0 == index || (sorted ? array.last() != value : !array.include(value))) {array.push(value);}return array;}); }

function (array) { return this.uniq().findAll(function (item) {return array.detect(function (value) {return item === value;});}); }

function () { return [].concat(this); }

function () { var results = []; this.each(function (object) {var value = Object.toJSON(object);if (!Object.isUndefined(value)) {results.push(value);}}); return "[" + results.join(", ") + "]"; }

As you can see, it shows the 6 elements in the array that I want, but it also shows random elements.

By the way, I can fix this by changing it to a normal for loop, but I want to know what I'm doing wrong.

Hi all, iv'e been trying to get round this for 2 days and still nothing.

What i want to do is to be able to outline elements on a page when hovered over... simple you might think. which it is.

Then with the id of the item outlined when right clicked, and chose an option, other things happen.

The menu side is sorted, and the hover outline is sorted. But iv'e been trying to put them both together but it wont work!

This is the closest iv'e gotten, whcih runs sooooo slow.

Code:

$(document).ready(function() {
		function elementHover(){
			$("*").bind("mouseover", function(event) {
				var element = $(event.target);
				if($(element).attr("rel")!="rightClickMenu"){
					$(element).addClass('outline-element');
					if( ($(element).attr("id")!="") && (typeof $(element).attr("id") != "undefined") ){
						getElementObj($(element));
						$("[id!='" + $(element).attr("id") + "']").hover(function(){
							$("#" + $(element).attr("id")).removeClass('outline-element');
						});
					}else{
						return "";
					}
				}else{
					return "";
				}
			});
		}
		elementHover();
    });

the big problem being this
var element = $(event.target);
if i changed it to
var element = $(event.target);
alert($(element).attr("id"));

it would open the dialog box about 10 times spitting all kinds of results. Any help would be much appreciated.

Ok so I have these elements on my page:

Code:

<input type="text" size="5" name="val[]" value="'.$NotaMaxima.'">

I want to loop through each one and take their number add it to another number set in a variable elsewhere and then alert that number.

The amount of these elements on the page changes constantly, so I can't count on that. It has to loop through each one to find the values. I tried this:

Code:

var els,i,asig;
 els=document.getElementsByTagName('val');
 for(i in els) {
   asig = parseInt(els[i].value) - parseInt(asig);
 }
alert(asig);

But no go, any ideas?

Hi again!!
This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate.

PHP Code:
<form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data">

<table width="100%" border="0" cellspacing="0" cellpadding="2">

<table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left">

<tr align="center">

<td width="10" class="forhead" style="white-space:nowrap;">&nbsp;</td>

<td width="92" class="forhead" style="white-space:nowrap;">Qty</td>

<td width="94" class="forhead" style="white-space:nowrap;">Rate</td>

<td width="94" class="forhead" style="white-space:nowrap;">Amount</td>

</tr>

</table>



<tr align="left">

<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td>

<table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text">

<tr>

<td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td>

<td width="92" class="forhead" style="white-space:nowrap;">



<input type="text"  name="qty[]"  style="width:80px;" onblur="">



</td>

<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  name="rate[]" style="width:80px;" value=""></td>



<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td>



</tr>

</table>

<table border="0">

<tr>

<td>Total:</td>

<td><input type="text"  name="total[]" style="width:80px;" value=""></td>

</tr>



<tr>

<td colspan="2">

<input name="Submit" type="submit" value="Save" style="text-decoration:none" />

<input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">

</td>

</tr>

</form>

<script type="text/javascript">



    function getValues(objName,objName2,objName3)

    {    

        var var3 = "";

        var arr = new Array();

        arr = document.getElementsByName(objName);

        arr2 = document.getElementsByName(objName2);

        arr3 = document.getElementsByName(objName3);

        for(var i = 0; i < arr.length; i++)

        {

            for(var i = 0; i < arr2.length; i++)

            {

            for(var i = 0; i < arr3.length; i++)

            {

            

                var obj1 = document.getElementsByName(objName2).item(i);

                var var2 = obj1.value;



                var obj = document.getElementsByName(objName).item(i);

                var var1 = obj.value;



                var obj3 = document.getElementsByName(objName3).item(i);

                var var3 = obj3.value;

                var var4 = var1 * var2;

                document.getElementsByName(objName3).item(i).value=var4;



            }        

            }

        }    

        

    }

    

  function addRow(tableID) {

     var table = document.getElementById(tableID);

     var rowCount = table.rows.length;

     var row = table.insertRow(rowCount);

     var colCount = table.rows[0].cells.length;

           for(var i=0; i<colCount; i++) {

               var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;

                //alert(newcell.childNodes);

                switch(newcell.childNodes[0].type) {

                    case "text":

                            newcell.childNodes[0].value = "";

                            break;

                    case "checkbox":

                            newcell.childNodes[0].checked = false;

                            break;

                    case "select-one":

                            newcell.childNodes[0].selectedIndex = 0;

                            break;

                }

            }

        }

        

function deleteRow(tableID)

{

            try

                 {

                var table = document.getElementById(tableID);

                var rowCount = table.rows.length;



                    for(var i=0; i<rowCount; i++) 

                        {

                        var row = table.rows[i];

                        var chkbox = row.cells[0].childNodes[0];

            

                        if (null != chkbox && true == chkbox.checked) 

                            {

                            if (rowCount <= 1) 

                                {

                                alert("Cannot delete all the rows.");

                                break;

                                }

                

                            table.deleteRow(i);

                            rowCount--;

                            i--;

                            }



                        }

                    } catch(e) 

                        {

                        alert(e);

                        }

}



</script>

I would like to know that how can I show the value of all the elements in array "amount" in total field??

Im working on a function where i need to return the active elements ID.
the element will have class="main" id="1" onmouseover="showSub()">

Would someone be able to write me a simple function which simply puts the elements ID number in an alert box? I can figure out the rest i need from that .

Thanks, Tom

Hi There

I am trying to create some ajax/javascript to append the scriptaculous Draggable to a number of div elements with a className of draggable. The problem is i need to get the id's of each element to make them draggable, as simply making all div elements on the page draggable would effect other elements on the page which I dont want to be so.

I need to:-
1.create a collection of div elements with className - draggable
2. make a list of all the element id's
3. make all elements with said id's draggable

I have left out the draggable part from the code, I have simply been trying to get the element id's to display so far



Code:

var dv;
var dh;

dv = document.getElementsByTagName('div');
if (dv.className == 'draggable')
{
for (var i = 0; i <= dv.length; i++)
{
dh = dv[i].getAttribute('id');
for (var j = 0; j <= dh.length;j++)
{
document.getElementById('content').innerHTML = dh[j].getAttribute('id');
}
}
}
else
{
alert ("no id");
}

I keep getting the alert message "no id" loaded

What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript:
Code:

<a href="#" id="square0"><li class="square"></li></a>

This is my complete code:

Code:

<html">
<head>
<title>Squares</title>
<style>

li.square {
	width: 26px; 
	height: 26px;
	border: 1px solid black;
	display: block;
	float: left;
	margin: 5px;
	background-color: #39F;	
}

div#squares {
	width: 725px;
	margin: 50px;
	background-color: #CCC;
	float: left;
}

div#form {
	width: 700px;
	text-align: center;
	clear: both;
	margin: 50px 50px 0 50px;
}

</style>
<script>
<!--
function generateSquare() {

var number = 0;
var squareID = "square" + number;
var container = document.getElementById('listOfSquares');
var linked = document.createElement('a');
linked.setAttribute('href', '#');
linked.setAttribute('id', squareID);

container.insertBefore(linked, container.firstChild);
addToElement(squareID);

}

function addToElement(elementID){
	
var new_element = document.createElement('li');
new_element.setAttribute('class', 'square');

document.getElementById(elementID).innerHTML=new_element;


}



//-->
</script>
</head>

<div id="form">
<form>
<input type="button" value="Generate Square" onclick="generateSquare()" />
</form>
</div>


<body>
<div id="squares">
  <ul id="listOfSquares">
  </ul>
</div>


</body>
</html>

Hi

I wanted to create multiple check box and once check box is clicked user should able to enter text and submit

so i created this but when check box toggle it keep creating text areas.
i wanted to create 1 text area per one check box

also i need to store each text area value to data base. how can i correct this to achieve my needs

PHP Code:
<script type="text/javascript">
function validate(chk){
  if (chk.checked == 1){

var htmlText =  "<textarea name='area' cols='40' rows='5'></textarea>";
        var newElement = document.createElement('div');
        newElement.id = 'text'; 
     newElement.innerHTML = htmlText;
             var fieldsArea = document.getElementById('text');
    fieldsArea.appendChild(newElement);
  }else
  {}

}
</script>
<form>
<label>option1
<input type=checkbox name=chk1 onclick="return validate(chk1);"></label>
<label>option2
<input type=checkbox name=chk2 onclick="return validate(chk2);"></label>
</form>
<div id="text"></div> 



Sorry for the language errors

Regards.

I put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event.

Wouldn't this little script remove any element with an id = 'link_container' ?

<script type="text/javascript">
var deleteDiv = document.getElementById('link_container');
document.body.removeChild(deleteDiv);
</script>

Hi there

I have a form with elements named (& id) 1 through 5
Why can't I loop through all my form elements like this...

Code:

function toggle(){
	for (var i=1;i<=5;i++)
	{
		var y = document.getElementById(i);
		y.style.backgroundColor = '#FFFFFF';		

	}
}

The error I get is y is null???
If I hard code the id's like this...
var y = document.getElementById('2');
it works fine??

Please Help

NEWB

Would this code i made


<html>
<head>
<title>Demo</title>

</head>
<html>

<body>

<h3>Just a Demo</h3>

<script type="text/javascript">









var numbers = new Array ( "1", "1", "1", "1", "1", "1" );

for ( i=1; i < numbers.length; i++ )
{
alert ( numbers[i] );
}









</script>

</body>
</html>


Would that be an exmaple of arrays with elements intilized to 1(true)

In the code below I have an iframe that acts as a WYSIWYG editor. On load a link is loaded inside the iframe. When you click the link a div opens that displays the URL of that link. Upon changing the link inside the DIV I want to update the href tag that I clicked.

I've experimented with pasteHTML/execCommand("inserthtml") however this only updates the link when you select the text before clicking (as opposed to just clicking on the link), otherwise it inserts a whole new link.

I'm trying to get this working across IE, Firefox, Opera, Chrome and Safari.

I'd happily pay someone (Paypal) to help me with this.

Code:

<html>
<body>

<script language="JavaScript">

// Initialize WYSIWYG
function initialise() {

	// HTML code to paste
	var html = "<a href='http://www.google.com'>Click Me</a>";
	
	if (detectBrowser() == "ie") {
	
		// IE
		editorContent.document.designMode='on'; // turn on design mode
		editorContent.document.attachEvent("oncontextmenu", showContextMenu); // add listener for context menu
		editorContent.document.attachEvent("onclick", showContextMenu); // add listener for context menu
		
		// Paste the HTML code in iframe
		document.editorContent.focus();
		range  = editorContent.document.selection.createRange();
		range.pasteHTML(html);
		document.editorContent.focus();
		
	} else {

		// FF, Saf, Chr, Op
		document.getElementById("editorContent").contentDocument.designMode='on'; // turn on design mode
		editorContent.document.addEventListener("contextmenu", showContextMenu, true); // add listener for context menu
		editorContent.document.addEventListener("click", showContextMenu, true); // add listener for context menu
		
		// Paste the HTML code in iframe
		editorContent.focus();
		editorContent.document.execCommand("inserthtml", false, html); 
		editorContent.focus();
			
	}
}

// Show Context Menu
function showContextMenu(e) {

	// Get the URL from the clicked link
	if (detectBrowser() == "firefox") {
	
		url = e.target.href;
	
	} else {

		url = document.getElementById('editorContent').contentWindow.event.srcElement.href;
	}
	
	// Set the URL in the pop-up and load it
	document.getElementById("theUrl").value = url;
	document.getElementById("popUp").style.visibility = 'visible';
	document.getElementById("popUp").style.display = '';

	if (navigator.appName != "Microsoft Internet Explorer") {
		e.stopPropagation();
		e.preventDefault();
	}

	return false;
}

// Update the URL
function updateUrl() {

	newUrl = document.getElementById("theUrl").value;

	alert('Update the URL to '+newUrl);
	
	/*******************************************/
	/* WHAT TO DO HERE TO UPDATE URL IN EDITOR */
	/*******************************************/
	
	document.getElementById("popUp").style.visibility = 'hidden';
	document.getElementById("popUp").style.display = 'none';

}

// Detect browser
function detectBrowser() {

	var userAgent = navigator.userAgent;
	var browser;

	if (userAgent.indexOf("MSIE") !=-1)
		browser = "ie";
	if (userAgent.indexOf("Firefox") !=-1)
		browser = "firefox";
	if (userAgent.indexOf("Chrome") !=-1)
		browser = "chrome";
	if (userAgent.indexOf("Safari") !=-1)
		browser = "safari";
	if (userAgent.indexOf("Opera") !=-1)
		browser = "opera";

	return browser;
}

</script>

<div id="popUp" style="width:250px; height:60px; border: 1px solid black; visibility:hidden; display:none; position: absolute; left: 300px; background-color:yellow; padding: 10px">
<form>
<input type="text" id="theUrl" size="30">
<p><input type="button" value="Update" onClick="updateUrl()">
</form>
</div>

<iframe id="editorContent" name="editorContent" width="200" height="200" frameborder="1" onLoad="initialise();"></iframe>

</body>
</html>

hello, would anyone be able to share with me a concept of how to build a vertical navigation bar that allows you to hover over the section and a hidden area with links would appear?
thank you

Hi,

I'm pulling my hair out to create a simple function!

I am creating an array based on form elements. I then am trying to create an IF (and nested IF) statement to check if the fields are empty and then with the nested IF statement use certain fields to create mathematical functions.

So far I have this:

function QuantityMWh(form) {

var formchk = document.forms[0]
for (i = 0; i < formchk.elements.length; i++) {
if (formchk.elements[1].value == "" && formchk.elements[2].value == "") {
alert("Please fill out all fields.")
break
}
}

}

It's only checking the first field and not the second, and vice versa. i.e. if only one field has text then it passes.

What am I doing wrong?

Thanks.