JavaScript - Getelementbyid - Can't Query Database

Hello,

I am retrieving xml - that works well.

It is when I use "getElementByID" that things go weird.

I can scoop up the elements, but it gives me 4 copies of each. When I try to run thru the first one, it doesn't recognize it as an array.

hmm. In otherwords.. lets say I do this.

var test = somevars.getElementByID('shoes');

test then looks like this:
[shoes shoes shoes shoes]

If I click on each "object" (shoes) - then I get the FULL xml in each... so I figure, ok - I'll just grab the first and reiterate thru that. ie..

for y=1 etc.. test[0].length

but that doesn't work. Do I have to then reach into the childNodes of this and grab the "shoes" elements?

Not sure if I am explaining this correctly.

this is what I have:

Code:

function fireAjax(){
new Ajax.Request( flashconfig.genXML, {
  method: 'get',
    contentType: "application/xml",
  onSuccess: function( transport ) {
    var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' );
    var spotlightView = $H();
    for( var b = 0; b < shoeTags.length; b++ ) {
        $w('title description link linkName image').each( function(cs){
              spotlightView[cs] = getNodeValue(shoeTags[b],cs);
        });
      builddisplay(displayModule, spotlightView);
    }

so shoeTags does get an array, but each element/object actually has ALL the shoe items in it - but then repeats... for the other array positions.

I tried just grabbing the ".first" or [0] like so, but that didn't work.
var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' ).first;
or
var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' )[0]

I have a form that is used to insert a new classified ad or to update an existing ad.
When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red.
This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it.

Here is the code snipit:
Code:

function submitbutton(mfrm) {
	var me = mfrm.elements;
	var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
	var r_num = new RegExp("[^0-9\.,]", "i");
	var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");

	var errorMSG = '';
	var iserror=0;
		// set notification background color
	var warnColor = '#<?php echo $this->error_color; ?>';
	
	// loop through all input elements in form
	for (var i=0; i < me.length; i++) {
	
		// check if element is mandatory; here mosReq="1"
		if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
			if (me[i].type == 'radio' || me[i].type == 'checkbox') {
				var rOptions = me[me[i].getAttribute('name')];
				var rChecked = 0;
				if(rOptions.length > 1) {
					for (var r=0; r < rOptions.length; r++) {
						if (rOptions[r].checked) {
							rChecked=1;
						}
					}
				} else {
					if (me[i].checked) {
						rChecked=1;
					}
				}
				if(rChecked==0) {
					errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
					// notify user by changing background color, in this case to red
					me[i].style.background = warnColor;
					iserror=1;
				} 
			}

			if ((me[i].value == '') || (me[i].value.length < 2)) {
				errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
				me[i].style.background = warnColor;
				iserror=1;
			} 
		}
	}
	
	if(iserror==1) {
		alert(errorMSG);
		return false;
	}
}

All,
I have the following code:
Code:

var poststr = "statusupdate=" + encodeURI( document.getElementById("statusupdate").value ) +
"&user_name=" + encodeURI( document.getElementById("user_name").value ) +
"&twitteryes=" + encodeURI ( document.getElementById("twitteryes").checked ) +
"&currentstatus=" + encodeURI( document.getElementById("currentstatus").value );

It seems to be failing on the
Code:

"&twitteryes=" + encodeURI (document.getElementById("twitteryes").checked )

If I remove the part I just showed it works fine. This is the HTML code:
Code:

<input type="checkbox" name="twitteryes" value="yesplease" />

Thanks in advance.

Hello,
Javascript newbie question. I am trying to write into <p> tags using getElementById(), instead of document.write() which I commented out but it does not work the way I put it. Thanks a lot if you can instruct me!

Code:

<html>
<body>

<script type="text/javascript">
var x;
var mycolors = new Array();
mycolors[0] = "blue";
mycolors[1] = "orange";
mycolors[2] = "green";



for (x=0; x<mycolors.length; x++)
  {
var output = mycolors[x] + "<br />"
document.getElementById("output").innerHTML=output; //instead of document.write(output);
  }
</script>

<p id="output"></>

</body>
</html>

Alright so i've been trying to code a layout with multiple 'frames'
. What I usually do is use the following script:

Code:

<center>
<script>
          function changeNavigation(id) 
          {document.getElementById('navigate').innerHTML=document.getElementById(id).innerHTML}
          </script>
          <noembed>
          <body>
          
        
          </noembed>

And then add all the divs which are linked to an imagemap, like this:

Code:

<img src="IMAGE" width="HERE" height="HERE" border="0" usemap="#ImageMap1">
<div style="width:HEREpx; height:HEREpx; position:absolute; left:HEREpx; top:HEREpx; z-index:1; overflow:auto;" 
id="HERE">
Blaa
</div>
<div style="display:none; overflow=none"; id="HERE">
And add as many as I need of these.
</div>
<map name="ImageMap1">
<area shape="HERE" coords="HERE" name="HERE"
onClick="changeNavigation('HERE')">
</map>

This always works fine when I have one 'navigation' frame. However this time I need to code a layout with multiple frames. I have tried starting a new script and linking to a new imagemap to do that. But what it does is it duplicates the image and the divs dont appear when clicking on a 'button'.
This is the layout I am coding
As you can see, each box has its own 'buttons' which should link to a div. I can do it for one of the boxes and its divs, but cant figure out how to do it for the others so it works.

Did my best to make this sound non-confusing. Hopefully someone will be able to help.

Hi,

I am new to javascript. Been picking up bits and parts but am bumping my head against walls.
Have table with 4 cols and 2 rows - header row and 2nd row with 3 input text boxes and 1 option list. Have an array to adds rows to table when user clicks button-max-3 more rows. Option list not a problem-propagates values. Row 1 - 1st and 2nd input boxes linked to JQuery for datapicker and 4th calls js validation for numeric input.
When user adds row those links are not there-which is what I need. Array cites input boxes with name and iteration of +1 for each added row. Should I use, in the array,
document.getElementById('startdate0'; document.getElementById('startdate1'); etc., or should I use keyword this? And if I use this, how is it applied?
I do not know how to declare these variables for recognition. Tried several methods without success.
Following is array:
Code:

<script language="Javascript" type="text/javascript">
/*<![CDATA[*/
		   
	var new_rows=new Array();
	var row_count=0;

     function addRow()
     {
          var tbl = document.getElementById('ReqDtTbl');
		  new_rows[row_count]=new Array();
          var lastRow = tbl.rows.length;
          var iteration = lastRow;
		  if (lastRow>4){
			  return;}
          var row = tbl.insertRow(lastRow);
		  var cellLeft = row.insertCell(0);
          var textNode = document.createElement('input');          
		  textNode.size = 7;
		  textNode.name = 'startdate' + iteration;		  
          cellLeft.appendChild(textNode); 
		  new_rows[row_count]['cell']=textNode;
          var cellRight = row.insertCell(1);          
          var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'enddate' + iteration;          
          el.id = 'enddate' + iteration;          
          el.size = 7; 
		  new_rows[row_count]['cell2']=el;
          cellRight.appendChild(el);          
          // the last cell!
          var cellRightSel = row.insertCell(2);          
          var sel = document.createElement('select');          
          sel.name = 'TypeHrs' + iteration;          
          sel.options[0] = new Option('-Select-', '""');
          sel.options[1] = new Option('Comp Time', 'Comp Time');
          sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
		  sel.options[3] = new Option('Overtime', 'Overtime');
		  sel.options[4] = new Option('Rel Comp', 'Rel Comp');          
          cellRightSel.appendChild(sel);
		  new_rows[row_count]['cell3']=sel;
		  var cellRight = row.insertCell(3);          
          var el = document.createElement('input');          
          el.type = 'text';          
          el.name = 'No. of Hours' + iteration;          
          el.id = 'No. of Hours' + iteration;          
          el.size = 7;         
          cellRight.appendChild(el);
		  
		  new_rows[row_count]['cell']=el;
		  row_count++;
     }
     function removeRow()
     {
          // grab element again
          var tbl = document.getElementById('ReqDtTbl');
          // grab length
          var lastRow = tbl.rows.length;
          // delete last row if there is more than one row
          if (lastRow > 2) tbl.deleteRow(lastRow - 1);
     }
	 /*]]>*/
</script>

Input box for date is:

Code:

<input style="width: 70px" type="text" id="startdate">

Function is:

Code:

<script type="text/javascript">
$(function() {
		$("#startdate").datepicker();
		$("#enddate").datepicker();
		$("#RcompStart").datepicker();
		$("#RcompEnd").datepicker();
	});
</script>

Input for numeric is:

Code:

<input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" />

And numeric validation function is:

Code:

<script type="text/javascript">
function checkQuarters( fld )
{
    var val = parseFloat(fld.value);
    if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
    {
        alert("Value must be a numeric and a multiple of 0.25");
        return false;
    }
    return true;
}
</script>

Thanks - John

What I'm trying to get are the tag ids separately after I call the callback function. I've been racking my brain for far too long on this one. Here is a shorter version of what I have. I'm using the array's length to count and break into their own lines.

How do i get all 9 id="hover_[index]" separately using my array length?

PHP Code:
var info = Array("bla_1", "bla_2", "bla_3", "bla_4", "bla_5", "bla_6", "bla_7", "bla_8", "bla_9");

function callback(results, status) {
    if (status == myStatus) {
        for (var i = 0; i < results.length; i++) {
            send(results[i]);
        }
    }
} 
function send(info) {    
    document.getElementById('results').innerHTML += "<div id='hover_"+info.length+"'>Something</div>";
    hover_target = document.getElementById('hover_'+info.length);// how do i get all 9 hover_[index] separately?
    someEvent.addDomListener(hover_target, 'mouseover', function() {
        // do something
    });
} 


Thank you so much in advance,
Frank

Hi there,

So I got this problem, and can't seem to figure it out myself.
I'm using JS ( no framework ). And that's the whole point of this script, so don't tell me to use one :P

Code:

var i=1;
var x=10; // Number of extraContent linked with extraContainers
for (i=1;i<=x;i++)
  {
	var content = "extraContent" +i;
	var container = "extraContainer" +i;
    document.getElementById(container).appendChild(document.getElementById(content));
  }

The problem here, that the container/content, in the getElementById will not return: extraContainer1/extraContent1

Any suggestions :)

~J

Any help would be greatly appreciated! I'm using javascript to create a slideshow of images with thumbnails. The slideshow works fine, the titles show up great, but my problem arises when I try to replace the href source of a div. [larger], specified in the js is supposed to be replacing the current a href source, but it isn't working.

This is the javascript that controls the slideshow:
Code:

var current = 0;

function swapimg( show ){

	var piece = new Array();
	var title = new Array();
	var larger = new Array();
	var meta = new Array();


	piece[0] = '../assets/images/nokia/nokia01.jpg';
	title[0] = '[ One ]';
	larger[0] = '../assets/images/nokia/nokia01_big.jpg';
	
	
	piece[1] = '../images/nokia/nokia02.png';
	title[1] = '[ Two ]';
	larger[1] = '../assets/images/nokia/nokia02_big.jpg';

	piece[2] = '../assets/images/nokia/nokia03.png';
	title[2] = '[ Three ]';
	larger[2] = '../assets/images/nokia/nokia02_big.jpg';

	piece[3] = '../assets/images/nokia/nokia04.png';
	title[3] = '[ Four ]';
	larger[3] = '../assets/images/nokia/nokia02_big.jpg';

	
	document.getElementById( 'featured' ).src = piece[show];
	document.getElementById( 'featured' ).alt = title[show];
	document.getElementById( 'featuretitle' ).innerHTML = title[show];
	document.getElementById( 'featuremeta' ).innerHTML = meta[show];
	document.getElementById( 'featurelarger' ).href = larger[show];
	
	for( i = 0; i < meta.length; i++ ){
		document.getElementById( 'item' + i ).style.opacity = '.5';
	}
	document.getElementById( 'item' + ( show ) ).style.opacity = '.99';
	
	current = ( show );
}

And this is the portion of the html that is supposed to be working with the [larger], but I'm having troubles with:

Code:

<div class="featurelarger"><a href="../assets/images/nokia/nokia01_big.jpg" id="featurelarger" class="thickbox" title="Windowcling" rel="gallery-art" >view larger</a></div>

Any help would be greatly appreciated, thank you in advance!

Hi. I'm making a web site...And the following bit of code doesn't work...It sais "document.getElementById(...) is null or not an object"...I tried various combinations of getElementById and getElementsByName but nothing works...Any help is very much appreciated. Thanks.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Rudolf-site management</title>
<script language="javascript">
<!--
function Val_imag(){
	if(document.site.Imagini[0].checked){
		for(var i=0; i<16; i++){
			document.getElementById('Fs_img')[i].style.display='none'
			document.getElementById('Txt_img')[i].style.display='none'}}
	else{
		if(document.site.Imagini[1].checked){
			for(var i=0; i<16; i++){
				document.getElementById('Txt_img')[i].style.display='none'}
			document.getElementById('Fs_img0').style.display=''}
		else{
			if(document.site.Imagini[2].checked){
				for(var i=0; i<16; i++){
					document.getElementById('Fs_img')[i].style.display='none'}
				document.getElementById('Txt_img0').style.display=''}
			else{
				for(var i=0; i<16; i++){
					document.getElementById('Fs_img')[i].style.display='none'
					document.getElementById('Txt_img')[i].style.display='none'}}}}}
function Cont_pag3(){
	if(document.site.Imagini[0].checked){
		document.site.pag3_5.disabled=false}
	else{
		if(document.site.Imagini[1].checked){
			if(document.site.Fis_img[0].value!=""){
				document.site.pag3_5.disabled=false}
			else{
				document.site.pag3_5.disabled=true}}
		else{
			if(document.site.Imagini[2].checked){
				if(document.site.Text_img[0].value.length>7){
					document.site.pag3_5.disabled=false}
				else{
					document.site.pag3_5.disabled=true}}}}}

// -->
</script>
</head>
<body bgcolor=#000437>
<font color=#FDB91A>
<form method="post" name="site" action="site.php" enctype="multipart/form-data">
<div id="pagina3" class="comanda">
Pasul III: Imagini<br/>
Pentru a trimite imaginile care vor aparea pe site (daca exista), aveti 2 optiuni: sa ne trimiteti un fisier .zip, .rar, etc sau sa scrieti un link unde le vom putea gasi.<br/><br/>
Le puteti organiza cum doriti dumneavostra, dar este preferabil sa folositi una dintre variantele urmatoa <br/><br/>
(folder) pagina 1: (folder) pagina 1-1: imaginile care apar pe pagina 1-1<br/>
<table style="color=#FDB91A"><tr><td width="155"></td><td width="250">imaginile care apar pe pagina 1 etc</td></tr></table><br/><br/>
(folder) pagina 1: imaginile care apar pe pagina 1<br/>
(folder) pagina 1-1: imaginile care apar pe pagina 1-1 etc<br/><br/>
(folder - nu este necesar) site: toate imaginile care apar pe site<br/>
<table style="color=#FDB91A"><tr><td width="200"></td><td width="250">fisier text (.txt, .doc, .docx etc) cu numele imaginilor si pagina pe care apar</td></tr></table><br/><br/>
La toate exemplele, in loc de pagina 1 etc puteti scrie numele paginii.<br/>
Puteti adauga pana la 10 fisiere si pana la 15 link-uri. Pentru a adauga inca un fisier/link apasati pe butonul corespunzator.<br/>
Va rugam ca fisierele trimise sa fie de maximum 5 MB. (Puteti downloada si instala gratuit <a href="http://www.rarlab.com/download.htm" target="_blank">WinRar</a> si sa-l folositi pentru a face o arhiva impartita in mai multe bucati.)<br/><br/>

<input type="radio" name="Imagini" value="NuAm" onClick="Val_imag();Cont_pag3()">Site-ul nu are imagini<br/>
<input type="radio" name="Imagini" value="Fisier" onClick="Val_imag();Cont_pag3()">Trimite fisier<br/>
<table id="Fs_img0" style="display: none"><tr><td><input type="file" name="Fis_img" size="100" onChange="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img1').style.display=''"></td></tr></table>
<table id="Fs_img1" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img2').style.display=''"></td></tr></table>
<table id="Fs_img2" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img3').style.display=''"></td></tr></table>
<table id="Fs_img3" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img4').style.display=''"></td></tr></table>
<table id="Fs_img4" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img5').style.display=''"></td></tr></table>
<table id="Fs_img5" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img6').style.display=''"></td></tr></table>
<table id="Fs_img6" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img7').style.display=''"></td></tr></table>
<table id="Fs_img7" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img8').style.display=''"></td></tr></table>
<table id="Fs_img8" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img9').style.display=''"></td></tr></table>
<table id="Fs_img9" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img10').style.display=''"></td></tr></table>
<table id="Fs_img10" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img11').style.display=''"></td></tr></table>
<table id="Fs_img11" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img12').style.display=''"></td></tr></table>
<table id="Fs_img12" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img13').style.display=''"></td></tr></table>
<table id="Fs_img13" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img14').style.display=''"></td></tr></table>
<table id="Fs_img14" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td><td width="30"></td><td><input type="button" name="Add_img_fis" value="Adauga fisier" onClick="document.getElementById('Fs_img15').style.display=''"></td></tr></table>
<table id="Fs_img15" style="display: none"><tr><td><input type="file" name="Fis_img" size="100"></td></tr></table>
<input type="radio" name="Imagini" value="Text" onClick="Val_imag();Cont_pag3()">Scrie/copiaza link-ul<br/>
<table id="Txt_img0" style="display: none"><tr><td><input type="text" name="Text_img" size="80" onKeyUp="Cont_pag3()"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img1').style.display=''"></td></tr></table>
<table id="Txt_img1" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img2').style.display=''"></td></tr></table>
<table id="Txt_img2" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img3').style.display=''"></td></tr></table>
<table id="Txt_img3" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img4').style.display=''"></td></tr></table>
<table id="Txt_img4" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img5').style.display=''"></td></tr></table>
<table id="Txt_img5" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img6').style.display=''"></td></tr></table>
<table id="Txt_img6" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img7').style.display=''"></td></tr></table>
<table id="Txt_img7" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img8').style.display=''"></td></tr></table>
<table id="Txt_img8" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img9').style.display=''"></td></tr></table>
<table id="Txt_img9" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img10').style.display=''"></td></tr></table>
<table id="Txt_img10" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img11').style.display=''"></td></tr></table>
<table id="Txt_img11" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img12').style.display=''"></td></tr></table>
<table id="Txt_img12" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img13').style.display=''"></td></tr></table>
<table id="Txt_img13" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img14').style.display=''"></td></tr></table>
<table id="Txt_img14" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td><td width="30"></td><td><input type="button" name="Add_img_txt" value="Adauga link" onClick="document.getElementById('Txt_img15').style.display=''"></td></tr></table>
<table id="Txt_img15" style="display: none"><tr><td><input type="text" name="Text_img" size="80"></td></tr></table><br/>
Observatii:<br/>
Daca aveti observatii/idei legate de imagini (amplasare, contur, text etc), le puteti scrie aici.<br/>
Nu este un camp obligatoriu.<br/>
<textarea name="Obs_img" cols="80" rows="7"></textarea><br/><br/><br/><br/>
<input type="button" name="pag2_1" value="Pagina precedenta">&nbsp&nbsp&nbsp&nbsp
<input type="button" name="pag3_5" value="Continua comanda" disabled=true>
</div>

PS1: this code worked in firefox
PS2: sorry for posting such a long code...

i am trying to pass the Id of a text field so I can validate it. At this point all I want to do is enter some text into the text field and then send that content to an alert box. I think my code should work but I get an alert box that says: "undefined". HELP!
Code:

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<title>Untitled</title>

<script type="text/javascript">
function verify_score(val1)
{
var temp = document.getElementById(val1)
alert(temp.value)
}
</script>
</head>
<body>

<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:200px">
	<form name="scoresheetform" action="">
	<div id="Submitbutton" style="position:absolute; left:52px; top:87px; width:110px; height:33px; z-index:1">
		<input type=submit name="Submitbutton" value="Submit Form" onClick="verify_score()"></div>
	<div id="HomePlayer1Rnd6Pnts" style="position:absolute; left:9.822px; top:37px; width:45px; height:29px; z-index:2">
		<input name="HomePlayer1Rnd6Pnts" onBlur="verify_score('HomePlayer1Rnd6Pnts')" size=3></div>
	<div id="HomePlayer1Rnd7Pnts" style="position:absolute; left:79.822px; top:37px; width:45px; height:29px; z-index:3">
		<input name="HomePlayer1Rnd7Pnts" onBlur="verify_score('HomePlayer1Rnd7Pnts')" size=3></div>
	<div id="HomePlayer1TotalPnts" style="position:absolute; left:146px; top:37px; width:45px; height:29px; z-index:4">
		<input name="HP1 Total Points" size=3></div>
	</form>
</div>
</body>
</html>

I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have:
Code:

if (Playa.btnState == "Stop") {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'"
document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'";
}
else {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'";
document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'";
}


<input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" />

Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen.

Any ideas?
Thanks

Hi,
I asked this question in an earlier post where Dormilich asked me to post the code, which I did twice but for some reason it hasn't posted so I'll try with a new thread....

I am passing a variable to a function in a separate .js file using embedded HTML.
I want to use the parameter in a getElementById but I can't get it to work.

Here's my HTML:
Code:

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT"> 
<!--
window.onload = function ()
{
initSlideDownMenu("accordionactivity");
}
//-->
</SCRIPT>

Here's my javascript function. When the first alert pops up I get 'accordionactivity', when the second one pops up I get '[object]' but when the third one pops up I get 'null'.The rest of the function then doesn't work properly either:
Code:

function initSlideDownMenu(slMenuName)
{

alert(slMenuName);
alert(document.getElementById('accordionactivity'));
alert(document.getElementById(slMenuName));

 dhtmlgoodies_slmenuObj = document.getElementById(slMenuName);
 dhtmlgoodies_slmenuObj.style.visibility='visible';
 var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];  
 var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
 mainItemCounter = 1;
 while(mainMenuItem){   
  if(mainMenuItem.tagName=='LI'){
   var aTag = mainMenuItem.getElementsByTagName('A')[0];
   var subUl = mainMenuItem.getElementsByTagName('UL');
   if(subUl.length>0){
    mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
    initSubItems(subUl[0],2);
    aTag.onclick = showSubMenu;
    mainItemCounter++;
   }    
  }   
  mainMenuItem = mainMenuItem.nextSibling; 
 }  
 if(location.search.indexOf('mainMenuItemToSlide')>=0){
  var items = location.search.split('&');
  for(var no=0;no<items.length;no++){
   if(items[no].indexOf('mainMenuItemToSlide')>=0){
    values = items[no].split('=');
    showSubMenu(false,document.getElementById('mainMenuItem' + values[1])); 
    initMenuIdToExpand = false;    
   }
  }   
 }else if(expandFirstItemAutomatically>0){
  if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
   showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
   initMenuIdToExpand = false;
  }
 }
 if(expandMenuItemByUrl)
 {
  var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
  for(var no=0;no<aTags.length;no++){
   var hrefToCheckOn = aTags[no].href;
   if(location.href.indexOf(hrefToCheckOn)==0 && (location.href.length==hrefToCheckOn.length || 

location.href.indexOf('?')==hrefToCheckOn.length)){
    initMenuIdToExpand = false;
    var obj = aTags[no].parentNode;
    while(obj && obj.id!=slMenuName){
     if(obj.tagName=='LI'){       
      var subUl = obj.getElementsByTagName('UL');
      if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
      if(subUl.length>0){        
       objectsToExpand.unshift(obj);
      }
     }
     obj = obj.parentNode; 
    }
    showSubMenu(false,objectsToExpand[0]);
    break;     
   }   
  }
 }
 if(initMenuIdToExpand)
 {
  objectsToExpand = new Array();
  var obj = document.getElementById(initMenuIdToExpand)
  while(obj && obj.id!=slMenuName){
   if(obj.tagName=='LI'){
    var subUl = obj.getElementsByTagName('UL');
    if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
    if(subUl.length>0){      
     objectsToExpand.unshift(obj);
    }
   }
   obj = obj.parentNode; 
  }
  showSubMenu(false,objectsToExpand[0]);
 }
}

Can you help me figure out what I'm doing wrong?
Thank you!

Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer.
I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html.
Is there a way to do this, give the document a alternative src to look in for the elements or something?
An example below.
Javascript snipit
[CODE]
imageId = "mainImage";
image = window.document.getElementById(imageId);
alert(image);
[CODE]
image returns null. what I want it to return is the value fro the HTMl document that this file is included in.
[CODE]
<script type="text/javascript" src="fadeFunctions.js">
</script>
</head>
<body>
<div id="imgHolder" style="position: absolute; top: 200px;">
<div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div>
[CODE]

Thanks for any help or suggestions that you can give.

why is getElementById not working?? pls try it and tell me if you get a hit on
document.getElementById("t1");


thanks
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tester code</title>
      <script type="text/javascript">
            console.log("sfsg");
            var e = document.getElementById("t1");
            var c = e.firstChild;
            console.log(c);
      </script>
</head>
<body>
      <table>
            <tr>
                  <td id="t1"><img id="img1" src="SharkSq1.png">3</td>
            </tr>
      </table>
</body>
</html>