JavaScript - Can You Store Getelementbyid As A Variable?

Hello again, I seem to be having trouble with my string variable in innerHTML.. here's my code:

Code:

function header() { // Navigation Bar
110 var o = document.getElementById("header");
111 var s = '<h3 style="float:left;">'
112 + '&nbsp; &nbsp; &nbsp;'
113 + '<a href="http://mattondo.com" class="link">MattOndo.Com</a></h3>'
114 + '<div style="float:right;">'
115 + '<div class="navbar">'
116 + '<a href="index.htm" class="nav" id="home">home</a>' //to homepage
117 + '<a href="about.htm" class="nav" id="about">about</a>' // to about page
118 + '<a href="construction.htm" class="nav" id="blog">blog</a>' // to blog page
119 + '<a href="contact.htm" class="nav" id="contact">contact</a>' // to contact page
120 + '</div>'
121 + '</div>';
122 o.innerHTML = s;

every time I run this using firebug, it says I have one error. That on line 122 variable o is null. And when I go through the code using firebug line by line, it gets to thevar o = document.getElementById("header"); and stores nothing in o, making it null. What could be my issue here??

I like to store into database with PHP values from Javascript. How to do this as I like to test local values from visitor.

PHP Code:


<script type="text/javascript">

document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("<br /><br />");
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: " + navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " + navigator.userAgent);

</script> 

Hey all!

Got a question I can't seem to find an answer to.

I have a little JS app that is a glorified calculator which I posted the code for below. My code uses the document object to replace the html in the "content" <div> and works great.
However, I want to add an inline style in order to change the background of the input (readonly field with an id of "coutput") based on either of the global variables named "MJPD" or "IJPD", (depending on the switch case selected in the user prompt at the beginning of the script.)

Simplified....if the value of MJPD is less than 4.6, I want the "coutput" field's background to be red, else be green.
The same goes for IJPD, except the threshold for red will be <3.83.

Code and what I have tried is below. After reading the code, look below it to see what I have tried and maybe tell me what I'm doing wrong! =)

Any help is greatly appreciated.......I have spent a week searching for this little answer and I can't seem to find it!

Code:

  
<script language="JavaScript">
var MJPD = 1;
var IJPD = 1;
function sayhello(){ //   *** live test for inline JS code placement
alert("IT WORKS!!! Now change me  =)");
}
//////////////////////////////////////////////////////
function changeScreenSize(w,h) 
{
       window.resizeTo( w,h )     
}
///////////////////////////////////////////////////
function iJPDCalc(form) //calculate IJPD value
{
var ij = parseFloat(form.IJobs.value, 10);
var it = parseFloat(form.ITime.value, 10);
var IJPD = 0;
IJPD = (ij / it) * 8.0;
form.I_JPD.value = IJPD;
}
/////////////////////////////////////////////////////
function mJPDCalc(form) //calculate MJPD value
{
var mj = parseFloat(form.MJobs.value, 10);
var mt = parseFloat(form.MTime.value, 10);
var MJPD = 0;
MJPD = (mj / mt) * 8.0;
form.M_JPD.value = MJPD;
}
/////////////////////////////////////////////////////
function ijpdcolor() //set bg color of coutput based on IJPD's value
{
if (IJPD >= 3.83) {
	return ("green");
}
else {
	return ("red");
}
}
/////////////////////////////////////////////////////
function mjpdcolor() //set bg color of coutput based on MJPD's value
{
if (MJPD >= 4.6) {
	return ("green");
}
else {
	return ("red");
}
}
/////////////////////////////////////////////////////
function startVZT3(){
var n=0;
n=prompt("What would you like to do?  1: Calculate IJPD  2: Calculate MJPD  3: Exit", "Enter a value from 1-3") 
switch(n) 
{
case(n="1"): 
document.getElementById("content").innerHTML='<FORM><h2>Combined IJPD Calculator</h2><p>Install components completed today:</p><INPUT NAME="IJobs" VALUE="3.84" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="ITime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your IJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=iJPDCalc(this.form)><p>Your current combined IJPD for today is:</p> <INPUT NAME="I_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="2"): 
document.getElementById("content").innerHTML='<FORM><h2>Combined MJPD Calculator</h2><p>Trouble components completed today:</p><INPUT NAME="MJobs" VALUE="4.6" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="MTime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your MJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=mJPDCalc(this.form); mjpdcolor();><p>Your current combined MJPD for today is:</p> <INPUT NAME="M_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="3"): 
alert('This page will now close...');
window.close();
break
default:
document.getElementById("content").innerHTML='<h1 style="padding-top: 40px; color: red;">You need to enter a value! Please try again...</h1>';
break
	}
}
///////////////////////////////////////////////////////
</script>
</head>
<body onload="changeScreenSize(825,775)">
<div id="wrapper">
<div id="sub_wrapper">

<br />
<br />

<input type="button" class="button" onclick="startVZT3()" value="Start VZT3 Web!" />
<br /><br />

<div id="content">
<h3 style="padding-top:60px;">VZT3</h3>
</div>
</div>
<script type="text/javascript"> <!-- trying script to ensure function and dynamic update of this value - doesnt work 2/3/2010 -->
document.write(mjpdcolor());
</script>

</div>
</body>

OK, so on the last line of each case statement where it injects html code into the content div, in this code style=" background: ** ** " and in between the ** ** marks, I have added such things as <script type="text/javascript">document.write(mjpdcolor())</script> (or ijpdcolor, depending on which case I am working with).

Theoretically, this should pull the value of MJPD (or IJPD), evaluate it for the if statement, then return the value of red or green and set the value of the background dynamically - but of course it doesnt. I have also tried different inline styles and even adding the css id and trying to link it to the mjpdcolor() function, but all to no avail.

Can someone help me please??

Thanks everyone, your awesome!

hi
quick question, i have 640 hidden html inputs like this but with different names.
<input type="hidden" name="b1r1c1" value"some value">

now i want to use
document.getElementById('b1r1c1).value = "whatever";

will that work eventhough there is no id on my hidden value.

it will be in a hta by the way.

thanks

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()" />

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

Hello,

I need to do this. I have 36 Divs called "contenido1, contenido2, contenido3 etc.)

And I want that "onclick" change a property of the css of all of them except 1. I know I can do this manually but its a lot of code lines so I think it would be another option to do ir in a loop.

Right now i am using this:

Code:

div = document.getElementById('contenido1');
div.style.display='block';
div = document.getElementById('contenido2');
div.style.display='none';
div = document.getElementById('contenido3');
div.style.display='none';
div = document.getElementById('contenido4');
div.style.display='none';
....

So in that case I want for example that all the DIVS called "contenido 2 to contenido 36" display: none and only contenido 1 display block. In the next cases would be the same: All the divs called "contenido 1 to contenido 36" display: none except "contenido 2" that i want to display: block.

So I can do it like this but are thousands of lines of code... and I am sure there are other more efficient option.

Anybody knows how to do that? Probably is a simple question.

Thank you!!

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.

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;
	}
}

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