JavaScript - Getelementbyid Is Not A Function

Hopefully some of you guys can help. I'm self taught in Javascript so only know little bits here and there (and don't even know if the thread title is labelled right for what I'm doing!) so help would be greatly appreciated.

I'm trying to create 4 buttons on a page (buttons shown by "click here to view c1, c2" etc.) however after I've clicked one button and the content is showing below, the content from the next button clicked does not show (almost as if it is hidden underneath).

I'm looking for a way of showing the content when the button is clicked, but hiding it once another button is clicked so other content is shown. Hopefully this is clear enough.

All help, tips or advice will be appreciated. Thankyou.

Code:

<script type="text/javascript" language="JavaScript"><!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
	}
else {
	document.getElementById(tid).style.display = "none";
	}
}
//--></script>
<table width="100%" cellspacing="4" cellpadding="4" border="0" align="center">
    <tbody>
        <tr>
            <td width="25%"><a href="javascript:InsertContent('c1');"> Click to see C1</a></td>
            <td width="25%"><a href="javascript:InsertContent('c2');"> Click to see C2</a></td>
            <td width="25%"><a href="javascript:InsertContent('c3');"> Click to see C3</a></td>
            <td width="25%"><a href="javascript:InsertContent('c4');"> Click to see C4</a></td>
        </tr>
    </tbody>
</table>
<hr />
<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c1">CONTENT C1
</div>

<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c2">CONTENT C2
</div>

<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c3">CONTENT C3
</div>

<div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c4">CONTENT C3
</div>

Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question.

I have a form and need to populate FIELD2 with the result of FIELD1.

Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name.

I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work)

Here is the code from the 2 fields:
FIELD 1:
Code:

<select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect">
<option value="-1" selected="selected">Choose</option>
<option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option>

FIELD 2:
Code:

<input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" />

Here is the javascript I tried to populate field 2 with the selected option of field 2:
Code:

function updaterole(){
        document.getElementById("rolename").value =document.getElementById("role").value;

I tried using name instead of value for field 1, but that didn't work either. The db just shows empty.

thanks for any help!

hi,

In my code below, I cannot get the setting_id value as it falls outside of the loop.

I have just tried to put in the getElementById function but it's not working?!
I get the error: missing ) after formal parameters

JavaScript

from this:
Code:

function confirmqualification(ID) {

to this:
Code:

function confirmqualification(document.getElementById('setting_id')) {

HTML

from this:
Code:

<input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" />

to this:
Code:

<input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" />

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

I am using javascript for adding and removing rows from table as per user require ment like if we press ADDROW button it adds extra row to table and if we pressREMOVEROW it delets the last row.. Now i want to access the data from textbox like this..
var crpt = document.getElementById("itrtr2").value; //no. of rows
for(var k=1;k<=crpt;k++)
{
qtyc = document.getElementById("txtRowc3"+k).value;
unit_pricec = document.getElementById("txtRowc5"+k).value;
alert('QTYC:'+qtyc+' UPC:'+unit_pricec);
cttl = qtyc * unit_pricec;
document.getElementById("txtRowc6"+k).value = cttl.toFixed(2);
csbttl = csbttl + cttl;
}
document.getElementById("subttlC").value=csbttl.toFixed(2);

it shows the value of textRowc3i in qtyc in alert box but also givs error document.getElementById("txtRowc3"+k) is null..
I tried for this but problem is not solved please help... Thank You...

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>

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.

http://johnathany.com/contact.html

What I'm trying to do is get the googlemaps iframe to change if i hit to corresponding 3 links at the bottom.

So I tried to use getElementById(leftcolumn).innerhtml to change the entire content of the div but it isnt working.
Please advise.

Or would there be a simpler solution like creating 3 hidden divs and just do display:block; to display them?

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..

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>

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

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.

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>

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

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