JavaScript - Innerhtml/div Size Changing Question

I'm taking a JavaScript class in school and we are working with forms and summary pages. We were never taught how to change the font color and bgColor when we go to the summary page after an onSubmit. Can anyone fill me in on how it is done?

This is pretty much my first really useful script that I wrote myself. I am trying to load a different index.html page for each different screen size that the browser has. So the page looks best at different resolutions. I am not really able to test it since I haven't finished building all the different resolution index pages yet. I am just wondering if anyone sees any glaring errors in my coding.

This is my script:
Code:

    <script src="javascript/stndlibrary.js">
	var screendim=getWindowSize();
	var screenwidth=screendim[0];
	var screenlength=screendim[1];
	var screenw=new array(640,800,1024,1280,1400,1600,2048); //Array for standard screen widths 
	var screenh=new array(480,600,768,1024,1050,1200,1536);  //Array for standard screen heights
	var indexfilename=new array('vga','svga','xga','sxga','sxgap','uxga','qxga'); //Array for filenames for different pages for each screen size
	for (i=0;i<=6;i++);
	}
	if (screenwidth <= screenw[i]) && (screenlength <= screenh[i]);
	  {
	    window.location.replace('http:\\perezcomputer.com\'+indexfilename[i] + 'index.html');
	    break;
	  }
	}
	</script>

The stndlibrary.js file contains the function I wrote to fetch the screen width and height that will be passed back to the script. that function is he
Code:

function getWindowSize() {
if (window.innerWidth)
 	theWidth=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
	 theWidth=document.documentElement.clientWidth;
else if (document.body)
 	theWidth=document.body.clientWidth;

if (window.innerHeight)
 	theHeight=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
	 theHeight=document.documentElement.clientHeight;
else if (document.body)
	 theHeight=document.body.clientHeight;
return [theWidth, theHeight]
     }

Please be gentle I am a nOObi...

Is it possible to give an anchor tag an id and call it with GetElement?

this is what I have tried:

Code:

<a id="link1" href="test.html">Part 1</a></li>

Code:

document.getElementById("link1").style.color = "blue";

This is my CSS:

Code:

A:link {
 	color:#ffffff;
    	font-size:14pt;
    	font-weight:bold;}

A:visited {
   	color:#ffff00;
    	font-size:14pt;
    	font-weight:bold;}

A:hover {
   	color:#6698ff;
    	font-size:14pt;
    	font-weight:bold;}

A:active {
	color:#c0c0c0;
   	font-size:14pt;
    	font-weight:bold;}

Hey, for some reason, this isn't working because of the src="images/edit.png" attribute.

Here is my code:
Code:

<a href="#" onclick="change('HEYYY')"><img src="images/edit.png" alt="Edit" id="edit1" /></a>

Javascript (External)
Code:

function change(message)
{
	document.getElementById('edit1').innerHTML = '<input type="text" value="'+message+'" />';
}

It does nothing. But if I take the src attribute out, it works fine.
Any help?
Thanks.

Does anyone have any suggestions as to how I can get IE working properly with this? It's a, (exempting IE), straight forward line numbering and plain text code view function. When using the line numbering portion, it works fine in Moz based browsers etc, as it does in IE for the initial numbering. On trying to remove the numbers though, (on the second call), IE just seems to cascade the list entries rather than removing them.


Code:

function process_code(id, number, print)
{
        if (document.getElementById(id))
        {
                var current = document.getElementById(id);
                var code = current.innerHTML.split('\n');
                var count = 0;
                var xcount = 0;

                if (number)
                {
                        if (current.innerHTML.indexOf('<li class="code-entry">') != -1)
                        {
                                code = code.join('\n');
                                code = code.replace(/\<\/(li\>\<\/ol|li)\>/ig, '\n');
                                code = code.replace(/\<ol\>\<li[^\>]+\>|\<li[^\>]+\>/ig, '');
                                current.innerHTML = code.replace(/^\n+|\n+$/g, '');
                        }
                        else
                        {
                                current.innerHTML = '<ol><li class="code-entry">'+code.join('</li><li class="code-entry">')+'<
/li></ol>';
                        }
                }
                else
                {
                        var doc = window.open('', 'code_print');
                        var newdoc = doc.document;

                        newdoc.open('text/plain');
                        newdoc.write(decode_code(code.join('\n')));
                        newdoc.close();

                        if (print)
                        {
                                if (navigator.userAgent.indexOf('Opera') != -1)
                                {
                                        window.print();
                                }
                                else
                                {
                                        doc.print();
                                }
                                doc.close();
                        }
                }
        }
}

Hello,

I am a newbie for Javascript. Currently I am doing a website which consists of a lot of contents. Therefore, I hope to get a solution which all my contents are arranged into a table (rows and columns). The condition is that there is only a html page to hold all the contents where there is a "view more" or 'next" button at the bottom and each times user can click to go to the different contents. I have tried to use the innerHTML and I was able to do for 2 pages only...Now I encountered a problem which I need to update more contents to more pages . Can you kindly give some guidelines according to this? Below shows the example code of my website:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript" type="text/javascript">
function OpenWindow()
{ 
	var content=document.getElementById('achieve').rows[0].cells;
	content[1].innerHTML="<br/><div align='justify' class='style1 style8'><span class='style11'>Another content</span></div>" + "<div align='left' class='style23 style13'>more details</div>";
	
	var content=document.getElementById('achieve').rows[1].cells;
	content[1].innerHTML="";
	var content=document.getElementById('achieve').rows[2].cells;
	content[1].innerHTML="<strong><em><font class=style13 style23 color=#FF6600><a href='test.html'>back</a></font></em></strong>";
}
</script>
</head>

<body>

      <!--id starts-->
        <table id="achieve" width="780" height="387" border="0">
          <tr>
            <td width="10" height="39">&nbsp;</td>
            <td width="340"><div align="center" class="style6">My Title</div></td>
            <td width="416">&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><div align="justify" class="style1 style8"><span class="style11">More Contents here</span></div></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td><div align="right"><strong><em><font class="style23 style13" color="#FF6600"><a href="#" onclick="OpenWindow()">+ view more </a></font></em></strong></div></td>
            <td>&nbsp;</td>
          </tr>
        </table>
</body>
</html>

How would you make a if for a input box =this do this
Some if the input boxe value = this then get innerHTMl

Can somebody explain me why this isn't working?

Code:

<SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto

var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value

function checkLotto() {

if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
   document.getElementById('boldStuff').style.color='#00ff00';
   document.getElementById('boldStuff').innerHTML = goed;
     }
	 
	 else {
   document.getElementById('boldStuff').style.color='#ff0000';
   document.getElementById('boldStuff').innerHTML = fout;
	  }
	  }

</script>

When I don't use the var, but give for example this:
it works ok.

Code:

document.getElementById('boldStuff').innerHTML = '6';

since there are troubles with innerHTML in IE .....

instead of :

Code:

target.innerHTML = src.innerHTML;

-->

Code:

  this.copy_innerHTML = function(src,target)
  {
    //remove all target inner elements
    while(target.hasChildNodes()){target.removeChild(target.childNodes[0])}

    for (var j = 0; j<src.childNodes.length-1; j++)
    {
       target.appendChild(src.childNodes[j].cloneNode(true));
    }

  }

a) Tested in FF and GC

b) in IE this works, but stuff does not appear where it should.

EDIT: if text nodes removed , then even in ff does not work, does not find textarea inside target node.
That is, the error pops up, previously only notable at IE. HTML & CSS validation is OK.

Any advice ?

Hello everyone! I'm a student and am trying to write some very simple code. My problem is I use innerHTML in my script file to send some text to a div in my html. When it's sent it renders and then quickly disappears. I've attached my code. Any help is dearly appreciated.

There are two separate "files" .html & .js:
Code:

<?xml version = "1/0" encoding = "utf-8"?>
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999.xhtm">
	<head>
		<!--  -->
		<!-- CS111 Quiz -->
		<title>CS111 Quiz</title>
		<script text = "text/javascript" src = "script.js">
		</script>
	</head>
	<body>
		<h1 align="center">Mike Overholt</h1>
		<br/>
		<br/>
		<form id="answers" name="answers" onSubmit="return quiz();">
			<table width="100%">
				<tr>
					<td align="center"><h3>1. What is 1+1?</h3></td>
					<td align="center"><h3>2. What is 2+2?</h3></td>
					<td align="center"><h3>3. What is 3+3?</h3></td>
				</tr>
				<tr>
					<td align="center">
						<input type="text" id="1" name="answer1" value=" " align="center"/>
					</td>
					<td align="center">
						<input type="text" id="2" name="answer2" value=" " align="center"/>
					</td>
					<td align="center">
						<input type="text" id="3" name="answer3" value=" " align="center"/>
					</td>
				</tr>
				<tr>
					<td align="center">
					</td>
					<td align="center">
						<input type="submit" id="submit" name="submit" value="submit" onClick="quiz();" align="center"/>
					</td>
					<td align="center">
					</td>
				</tr>
			</table>
		</form>
		<div id="div1" align="center" name="answer_box" style="border:2px; border-color:gray; border-style:solid; width:50%; margin-left:auto; margin-right:auto; height:200px;">
			<p id="p1"></p><br/>
			<p id="p2"></p><br/>
			<p id="p3"></p>
			<!--<script>alert(1);</script>-->
		</div>
	</body>	
</html>




//script.js
//Mike Overholt
//Quiz 1
function quiz()
	{
	var i=1;
	var ans=new Array();
	ans[1]=2;
	ans[2]=4;
	ans[3]=6;
	for(i=1;i<ans.length;i++)
		{
		var a=document.getElementById("p"+i);
		if(document.getElementById(i).value==ans[i])
			{
			a.innerHTML="You answered number "+i+" correctly!";
			}
		else
			{
			alert("You answered number "+i+" incorrectly, please try again.");
			}
		}
	}

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.

Hello all, I'm trying to lern javascript, but my knowledge doesn't cover what I want, so I could use some help. I'm trying to make a lotto check form for our family.

What it as to do is check the numbers(B) with numbers(A)

Code:

<SCRIPT TYPE="TEXT/JAVASCRIPT">
// Check lotto



function checkLotto() {
var goed = frmTrekking.EersteGetal.value
var fout = frmGetallen.Opgegeven_1.value

if (frmTrekking.EersteGetal.value == frmGetallen.Opgegeven_1.value) {
   document.getElementById('boldStuff').style.color='#00ff00';
   document.getElementById('boldStuff').innerHTML = goed;
     }
	 
	 else {
   document.getElementById('boldStuff').style.color='#ff0000';
   document.getElementById('boldStuff').innerHTML = fout;
	  }
	  }

</script>

Code:

<body onload="checkLotto();">
<form id="frmGetallen" name="frmGetallen" method="post" action="">
  <table width="100%" border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td width="9%"><strong>A</strong></td>
      <td width="6%"><strong>Naam</strong></td>
      <td width="10%"><strong>1</strong></td>
      <td width="10%"><strong>2</strong></td>
      <td width="10%"><strong>3</strong></td>
      <td width="10%"><strong>4</strong></td>
      <td width="10%"><strong>5</strong></td>
      <td width="10%"><strong>6</strong></td>
      <td width="10%"><strong>7</strong></td>
      <td width="10%"><strong>8</strong></td>
      <td width="10%"><strong>9</strong></td>
      <td width="10%"><strong>10</strong></td>
    </tr>
    <tr>
      <td><strong>1</strong></td>
      <td><strong>Joop</strong></td>
      <td><b id='boldStuff'><input name="Opgegeven_1" type="hidden" id="Opgegeven_1" value="6" size="5" /> </b></td>
      <td><b id='boldStuff'><input name="Opgegeven_2" type="hidden" id="Opgegeven_2" value="8" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_3" type="hidden" id="Opgegeven_3" value="16" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_4" type="hidden" id="Opgegeven_4" value="18" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_5" type="hidden" id="Opgegeven_5" value="26" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_6" type="hidden" id="Opgegeven_6" value="28" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_7" type="hidden" id="Opgegeven_7" value="32" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_8" type="hidden" id="Opgegeven_8" value="36" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_9" type="hidden" id="Opgegeven_9" value="38" size="5" /></b></td>
      <td><b id='boldStuff'><input name="Opgegeven_10" type="hidden" id="Opgegeven_10" value="41" size="5" /></b></td>
    </tr>
    
  </table>
</form>
<form id="frmTrekking" name="frmTrekking" method="post" action="">
  <label></label>
  <table width="58%" border="0" cellspacing="5" cellpadding="5">
    <tr>
      <td width="7%"><strong>B</strong></td>
      <td width="10%"><input name="EersteGetal" type="text" id="EersteGetal" value="6" size="5" /></td>
      <td width="10%"><input name="TweedeGetal" type="text" id="TweedeGetal" value="12" size="5" /></td>
      <td width="10%"><input name="DerdeGetal" type="text" id="DerdeGetal" value="20" size="5" /></td>
      <td width="10%"><input name="VierdeGetal" type="text" id="VierdeGetal" value="32" size="5" /></td>
      <td width="10%"><input name="VijfdeGetal" type="text" id="VijfdeGetal" value="5" size="5" /></td>
      <td width="10%"><input name="ZesdeGetal" type="text" id="ZesdeGetal" value="15" size="5" /></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>

What I have now is the check between 2 numbers, I need to have it checked all, so all the B numbers have to be checked with all the A numbers. I think i'll need a sort of loop in a array, but I really don't know how to do this. Can somebody help me with this please?

Hello.

I have the following:

bottomCell.innerHTML = "apples 0";
bottomCell.innerHTML.replace("apples", "oranges", "gi");

The first line works fine, the second one doesn't.

In the end, I want it to replace all instances of the numerical variable named myNumber to the string "t" + newNumber (where newNumber is another numerical variable) but neither this, nor the above mentioned line work.

Any ideas?
Thanks!

Hello everyone,

My problem consist in that I want to avoid re-loading the whole page, and only re-load the portion of the website that needs to be.
Similar to listed below;

website Banner (Solid)
Menu bar (Solid)
Div content (Changeable)

The main problem is that no matter what I do, I can't make the innerHTML cover the whole <div> </div>
It remains the same very small size, no matter what I put within the div. Far from its full size potential (plenty of space left).

Head script Code:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>

<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
//]]>

</script>

<link rel="stylesheet" type="text/css" href="main_stylesheet.css" media="screen, projection" />

</head> 


Here is the html portion.
PHP Code:
<div id="one" style="background-color:#C0C0C0;position:relative;height:2000px;width:800px;float:left;"></div> 


Here is the link placed elswhere on the website (The solid menu bar)
PHP Code:
<li><a href="http://www.google.com" onclick="updateObjectIframe(this); return false;">Forums</a></li> 




It's not Google that I want to use, however a PHPBB forum.
But I found that the same problem occurs on no matter what I put in this innerhtml, the javascript gets limited to the same little box in the upper left corner of my div.
Can't change size, no matter what I tried to do.

I'm suspecting it has something to do with CSS, however I spended a whole night (and now day) trying to work this out, I really don't get much further.
I realize I should spend a couple of more nights when new to JS, however this kind script I consider like a foundation to a house, it's important before moving on with learning, maybe I'm wrong though.

Anyone who can help with this issue?
Would be very much appreciated, Thank you!

Hi there,
Ive check the following code in all major browser and it works fine accept ofcourse in IE.
Im trying to take the innerHTML from one row and move it to the one above or below depand on the button you are clicking.
Does anyone have any idea?

Many thanks
mkariti

<!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>Insert title here</title>
<style type="text/css">
TABLE {
border-collapse: collapse;
}
TBODY {
border-top: solid black 1px;
}
TR {
border-bottom: solid black 1px;
}
</style>
<script type="text/javascript" language="javascript">

var getId;
var row = {
selected: -1,
hoverColor: '#CCCCCC',
defaultColor: '#FFFFFF',
onclick: function (trow, id) {
getId = id;

var r = document.getElementById('row_' + row.selected);
if (row.selected != -1 && r)
r.bgColor = row.defaultColor;
row.selected = id;
trow.bgColor = row.hoverColor;

},
test: function (num) {

var table = document.getElementById("tableId");
var getRowLength = document.getElementById("tableId").rows.length;

if (num == 1) {

// table.rows[getId].parentNode.insertBefore(table.rows[getId], table.rows[getId - 1]);
// getId++;
var tempDown = document.getElementById("row_" + getId).innerHTML;
document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId + 1)).innerHTML;
document.getElementById("row_" + getId).bgColor = row.defaultColor;
document.getElementById("row_" + (getId + 1)).innerHTML = tempDown;
document.getElementById("row_" + (getId + 1)).bgColor = row.hoverColor;
getId++;


}
else {
// getId--;
// table.rows[getId].parentNode.insertBefore(table.rows[getId + 1], table.rows[getId]);

var tempUp = document.getElementById("row_" + getId).innerHTML;
document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId - 1)).innerHTML;
document.getElementById("row_" + getId).bgColor = row.defaultColor;
document.getElementById("row_" + (getId - 1)).innerHTML = tempUp;
document.getElementById("row_" + (getId - 1)).bgColor = row.hoverColor;

getId--;

}

}

}

</script>
</head>
<body>
<div>
<table id="tableId">
<tbody>
<tr id="row_1" onclick="row.onclick(this,1);"><td><input type="checkbox"></td><td>Row 1</td><td>A</td></tr>
<tr id="row_2" onclick="row.onclick(this,2);"><td><input type="checkbox"></td><td>Row 2</td><td>B</td></tr>
<tr id="row_3" onclick="row.onclick(this,3);"><td><input type="checkbox"></td><td>Row 3</td><td>C</td></tr>
<tr id="row_4" onclick="row.onclick(this,4);"><td><input type="checkbox"></td><td>Row 4</td><td>D</td></tr>
<tr id="row_5" onclick="row.onclick(this,5);"><td><input type="checkbox"></td><td>Row 5</td><td>E</td></tr>
</tbody>
</table>
</div>
<div>
<button id="btn_down" onclick="row.test(1)">Down</button>
<button id="btn_up" onclick="row.test(2)">Up</button>

</div>
</body>
</html>