JavaScript - Problems With Getelementbyid

Hey guys,

Thanks for taking the time to read my post. I am not new to programming or scripting, but I am completely new to javascript and web-based code. Hopefully you guys could help me understand what is going on and maybe help me figure out what I am trying to do.

What I am trying to do:
-There is an element that has a value
<td class="flashField" onmouseover="clearAnswer()">
<div id="flashAnswer" onmouseover="clearAnswer()">answer string here</div>
</td>

-There is a text box that needs to have the answer above given to it
<td class="flashField">
<input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50">
</td>

-There is a next button that needs to be executed
<td align="right">
<input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif">
</td>

So what I am trying to do is create a script through Greasemonkey that will automatically do these things. I am starting small and trying to just get the value of flashAnswer to appear as an alert on the screen by using this code:
var answer = document.getElementById('flashAnswer');
alert(answer);

But the problem is it posts some weird value ([object XrayWrapper [object HTMLDivElement]]) that most definitely is not "answer string here" and is a bit above me at this point. Any ideas?

Any help would be great guys!

Thanks!
-ellosiph

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.

I have a html file and a separate javascript file.

The html file contains: <input type="reset" id = "resetButton" />

I want a message to pop up if the reset button is pressed.

So in the js file I have:
document.getElementById("resetButton").onclick = doAlert;

doAlert is a function that simply does: alert("Do you want to reset?");

I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks!

btw, I'm totally new to programming...and I need to do this for my homework assignment

I've spent three days trying to figure this out without any luck.
What i am attemping to do is to open an unframed tab using the link from a frame id. I want to be able to enter a js command in the browser on the page then have it open in a new tab unframed or just reload the link unframed. These are the commands i have tried in my browser:


javascript:<a herf="document.getElementById("netlinkx").childNodes[1].src;">

javascript:<a herf="window.location.href=document.getElementById("netlinkx").childNodes[1].src;">

javascript:<a herf=document.getElementById("netlinkx").children[0]>.setAttribute('id','this_one');alert(getFrame("this_one").body.innerHTML);>

and a few others that didn't work.

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>

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 some simple javascript code that works fine in chrome and safari, but not Ie8

Code:

<head><script type="text/javascript">
function val2() {
	//var num = Number(document.getElementById('PdRows').value)
	alert (document.getElementById('PdRows').value)
}
</script></head>

<form action="" method="post">
<select name="PD" id="PdRows" onchange="val2()">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>   
</form>

Why? And how do I correct?

Hi Everybody,

I'd be grateful if you could help me out. I need to change the CSS by changing the id when a link is clicked.
The id is in the body tag and by default it is named 'first'. i.e
<body id="first">.
If I click on the link named 'Change id to Second', this should change to <body id="Second">.
If I further click on the link named "Change id to Second" this should change to
<body id="Third">.

My code below works (I have stripped this down to make sense), but only when I click one of the links for the first time. If I am to click the second/ third link, nothing happens:

Code:

<html>
<head>
<script type="text/javascript">
function changeFirst() {
                 document.getElementById('blanky').id  = 'first';
              	 document.getElementById('second').id  = 'first';
		 document.getElementById('third').id   = 'first';
             }
function changeSecond() {
                 document.getElementById('blanky').id = 'second';
              	 document.getElementById('first').id  = 'second';
		 document.getElementById('third').id  = 'second';
             }
function changeThird() {
                 document.getElementById('blanky').id  = 'third';
              	 document.getElementById('first').id   = 'third';
		 document.getElementById('second').id  = 'third';
             }
</script>
</head>
<body id=first><!-- I need to change this id -->
<p>Hello, the id above should change when the following links are clicked</p>
<a  onclick="changeFirst()">Change id to First</a>
<a  onclick="changeSecond()">Change id to Second</a>
<a  onclick="changeThird()">Change id to Third</a>
</body>
</html>

Any help will be greatly appreciated.

Cheers

Hello.

I'm trying to change the text on my page dynamically using getElementById etc. Just not quite sure how to do it.

Code:

<script>

function changeIt() {
document.getElementById('change').innerHTML = '*i want the stuff below here (from 'var' to 'text')*';
}

var Result= ((correct / 5) * 100) + '%';
document.write('<p>Result<b>' + score + '</b></p>');
					
document.write('<p>some text</p>');
</script>


//
<div id = "change">
*all the info I'm going to replace*
</div>

Just need to know how to put the variables and stuff in the 'innerhtml' part?

Thanks.

Hi -
Code:

function EvalSound(soundobj) {// this passes the sound to be played to the java applet embedded in the html file and plays it. see ref: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
 
  document.getElementById(soundobj).Play();
}

I get a firebug error message 'getElementB...ay is not a function'.

However, this error only occurs on my machine at work where I am running Firefox for U3 (updated to FF 3.5.5) - U3 is a SanDisc flash drive.

When I run the same code on FF 3.5.5 from home there is no error. The code works in all other browsers I've tested (IE6, IE8, Chrome).

The page is http://dermdudes.com/counter/keycounter.html
Please provide feedback if the page does not work for you.

Please help. Thanks, Jim

Hi, quick question:

Code:

function x() {
	document.getElementById('myid').width += 200;
}

This works for "myid", but my document contains "myid1", "myid2", "myid3", and so forth. How can I alter the script to effect every instance of "myid" followed by a number?

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.

I'm working on a web site: http://84.9.221.75/domains/backingtr...usicindex.html

I'm trying to get the Javascript that controls the scrolling text to scroll on both the left and right sides.....right now it only scrolls on the left, due to the use of getElementById() from what i can see....

So I'm trying to make the javascript see all references to the ID in the document, and make the right panel div scroll as well, but I'm not having any luck....

I have a very basic understanding of Javascript, so I need a little help here guys...thanks..

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.