[SOLVED] getElementbyId issue.

deepson2 · August 27, 2009

Hello,

I want to change my this line

document.form1.text1.value=Messages[currentIndx];

to this

document.getElementById('text1').value=Messages[currentIndx];

but it seems its not working. the first line represent and work fine for textarea. but i dont want to use textarea, i want to user div so just made the changes but its not working.

here is my code with textarea. and its working fine

<html>
<head>
<script type="text/javascript">
currentIndx=0;
MyImages=new Array();

MyImages[0]='vulcano.gif';

MyImages[1]='eye.gif';

MyImages[2]='ear.gif';

MyImages[3]='hand.gif';

Messages=new Array()

Messages[0]='We learn about our world through the 5 senses';

Messages[1]='We use our eyes to see things';

Messages[2]='Our ears to hear things'

Messages[3]='And our sense of touch to feel things.';

imagesPreloaded = new Array(4)

for (var i = 0; i < MyImages.length ; i++)

{

imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]

}

/*###### function to write image number in sequence, eg 1 of 4*/
function writeImageNumber()
{
oSpan=document.getElementById("sp1");
oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length;

}

/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
writeImageNumber();
}
function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
}
writeImageNumber();
}
function automaticly() {
    if (document.form1.automatic.checked) {
if (currentIndx<imagesPreloaded.length){
currentIndx=currentIndx
}
else {
currentIndx=0
}
writeImageNumber()
document.theImage.src=imagesPreloaded[currentIndx].src
document.form1.text1.value=Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automaticly()",3500)
    }
}

/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.form1.text1.value=Messages[0];
writeImageNumber();
}
</script>
</head>
<body onload="setCurrentIndex();automaticly()">
<!-- ####################### start of form for image slide show ####################### -->

<form NAME="form1" align="center">

<table BORDER="3">

<tr>

<td><img SRC="vulcano.gif" NAME="theImage" HEIGHT="120" WIDTH="120"></td>

/* The text area below has the initial value (same as Messages[0]). Later it changed by code*/

<td><textarea rows="4" name="text1" cols="20" wrap="virtual">We learn about our world through our 5 senses.</textarea></td>

</tr>

<tr>

/* The following 2 buttons call  the functions Backer() and Nexter(), explained above. */

<td><input type="button" value="<< Previous" name="previous" onClick="Backer()"></td>

/* Don't forget the span, where the function writes the current image number!.(You can put this where you like) */

<td><input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span></td>

</tr>

<tr>

<td><div align="right"><p>Automatic:</td>

/* Finally, the check box calls the function 'automatically()' when it is clicked. */

<td><input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> </td>

</tr>

</table>

</form>

<!-- ####################### end of form for image slide show ####################### -->
</body>
</html>

now i want to get this done according to this code. but its not working

<html>
<head>
<script type="text/javascript">
currentIndx=0;
MyImages=new Array();

MyImages[0]='vulcano.gif';

MyImages[1]='eye.gif';

MyImages[2]='ear.gif';

MyImages[3]='hand.gif';

Messages=new Array()

Messages[0]='We learn about our world through the 5 senses';

Messages[1]='We use our eyes to see things';

Messages[2]='Our ears to hear things'

Messages[3]='And our sense of touch to feel things.';

imagesPreloaded = new Array(4)

for (var i = 0; i < MyImages.length ; i++)

{

imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]

}

/*###### function to write image number in sequence, eg 1 of 4*/
function writeImageNumber()
{
oSpan=document.getElementById("sp1");
oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length;

}

/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById(text1).value=Messages[currentIndx];
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById(text1).value=Messages[currentIndx];
}
writeImageNumber();
}
function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').value=Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').value=Messages[currentIndx];
}
writeImageNumber();
}
function automaticly() {
    if (document.form1.automatic.checked) {
if (currentIndx<imagesPreloaded.length){
currentIndx=currentIndx
}
else {
currentIndx=0
}
writeImageNumber()
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').value=Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automaticly()",3500)
    }
}

/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.getElementById('text1').value = Messages[0];
writeImageNumber();
}
</script>
</head>
<form NAME="form1" align="center">

<div id="text1">
We learn about our world through our 5 senses.

</div>
<div>
<input type="button" value="<< Previous" name="previous" onClick="Backer()"></td>
<input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span></div>



<div align="right"><p>Automatic:</p>
<input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> 
</div>

</form>
</html>

Can anyone check my both the code and tell me how can i get my second code to work that is with div?

Thnaks in advance

JonnoTheDev · August 27, 2009

A div element does not contain a value attribute as form elements do!

[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>Test</title>
<script type="text/javascript">
function setDiv() {
var divElement = document.getElementById("text1");
divElement.innerHTML = "Hello World";
}
</script>
</head>
<body>
<a href="#" onclick="setDiv();">Display Message</a>
<div id="text1"></div>
</body>
</html>

[/code]

deepson2 · August 27, 2009

Thanks for your reply neil,

As you may have seen my first code. i want to do somthing like that. but i dont want to use textarea there so just wanted to keep my div like the following

<div id="text1">
We learn about our world through our 5 senses.

</div>

Could you please tell me how can i change my document.forms to document.getElementById ? so it ll work the same but without the textarea.

JonnoTheDev · August 27, 2009

document.getElementById('text1').innerHTML = Messages[currentIndx];

deepson2 · August 27, 2009

I have changed what you have suggested. but it seems its not working.

<script type="text/javascript">
currentIndx=0;
MyImages=new Array();

MyImages[0]='vulcano.gif';

MyImages[1]='eye.gif';

MyImages[2]='ear.gif';

MyImages[3]='hand.gif';

Messages=new Array()

Messages[0]='We learn about our world through the 5 senses';

Messages[1]='We use our eyes to see things';

Messages[2]='Our ears to hear things'

Messages[3]='And our sense of touch to feel things.';

imagesPreloaded = new Array(4)

for (var i = 0; i < MyImages.length ; i++)

{

imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]

}

/*###### function to write image number in sequence, eg 1 of 4*/
function writeImageNumber()
{
oSpan=document.getElementById("sp1");
oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length;

}

/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').innerHTML=Messages[currentIndx];
}
else {
currentIndx=0
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').innerHTML=Messages[currentIndx];
}
writeImageNumber();
}
function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').innerHTML = Messages[currentIndx];
}
else {
currentIndx=3
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').innerHTML = Messages[currentIndx];
}
writeImageNumber();
}
function automaticly() {
    if (document.form1.automatic.checked) {
if (currentIndx<imagesPreloaded.length){
currentIndx=currentIndx
}
else {
currentIndx=0
}
writeImageNumber()
document.theImage.src=imagesPreloaded[currentIndx].src
document.getElementById('text1').innerHTML = Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automaticly()",3500)
    }
}

/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.theImage.src=MyImages[0];
document.getElementById('text1').innerHTML = Messages[0];
writeImageNumber();
}
</script>

<form NAME="form1" align="center">

<div id="text1" wrap="virtual">
We learn about our world through our 5 senses.

</div>
<input type="button" value="<< Previous" name="previous" onClick="Backer()"></td>
<input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span>



<div align="right"><p>Automatic:</p>
<input type="checkbox" name="automatic" value="ON" onClick="automaticly()"> 
</div>

</form>

Could you plesse check it and tell me why its not working.?

JonnoTheDev · August 27, 2009

document.theImage is undefined. That is clear.

What web browser are you using?

Use Firefox and use the error console to debug!

tools >> error console

deepson2 · August 27, 2009

using error console, i have removed some error. here is my code

<html>
<head>
<script type="text/javascript">
currentIndx=0;


Messages=new Array()

Messages[0]='We learn about our world through the 5 senses';

Messages[1]='We use our eyes to see things';

Messages[2]='Our ears to hear things'

Messages[3]='And our sense of touch to feel things.';

imagesPreloaded = new Array(4)

for (var i = 0; i < MyImages.length ; i++)

{

imagesPreloaded[i] = new Image(120,120)

imagesPreloaded[i].src=MyImages[i]

}

/*###### function to write image number in sequence, eg 1 of 4*/
function writeImageNumber()
{
oSpan=document.getElementById("sp1");
oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length;

}

/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
currentIndx=currentIndx+1;
document.getElementById('text1').innerHTML=Messages[currentIndx];
}
else {
currentIndx=0
document.getElementById('text1').innerHTML=Messages[currentIndx];
}
writeImageNumber();
}

function Backer(){
if (currentIndx>0){
currentIndx=currentIndx-1;
document.getElementById('text1').innerHTML = Messages[currentIndx];
}
else {
currentIndx=3
document.getElementById('text1').innerHTML = Messages[currentIndx];
}
writeImageNumber();
}
function automaticly() {

writeImageNumber()
document.getElementById('text1').innerHTML = Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automaticly()",3500)
    }
}

/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex()
{
currentIndx=0;
document.getElementById('text1').innerHTML = Messages[0];
writeImageNumber();
}
</script>
</head>
<body onload="setCurrentIndex();automaticly()">
<form NAME="form1" align="center">

<div id="text1" wrap="virtual">
We learn about our world through our 5 senses.

</div>
<input type="button" value="<< Previous" name="previous" onClick="Backer()"></td>
<input type="button" value="Next >>" name="next" onClick="Nexter()"> <span id="sp1"></span>



<div align="right"><p>Automatic:</p>
<input type="checkbox" name="automatic" value="ON" onClick="automaticly()">
</div>

</form>
</body>
</html>

but still getting these two error

Error: Backer is not defined

Error: Nexter is not defined

Line: 1

but its already define. so why its showing these error. could you please tell me.

JonnoTheDev · August 27, 2009

Why are you using a form?

Form buttons will submit the page!

deepson2 · August 27, 2009

ok,i removed them still getting same errors. what can i do? please help me.

JonnoTheDev · August 27, 2009

I haven't the time at the mo to look over the script in its entirety but I may have a look on the weekend. Bookmarked.

deepson2 · August 28, 2009

ok, thanks neil, can anyone else help me?

cbolson · September 5, 2009

Hi,

You have several syntax issues with your javascript that prevent it from "finishing" and that is why the code thinks that the functions are not defined.

I have gone thorugh it and cleaned out the errors.

Try replacing your javscript with this:

currentIndx=0;
MyImages=new Array();
MyImages[0]='vulcano.gif';
MyImages[1]='eye.gif';
MyImages[2]='ear.gif';
MyImages[3]='hand.gif';

Messages=new Array()
Messages[0]='We learn about our world through the 5 senses';
Messages[1]='We use our eyes to see things';
Messages[2]='Our ears to hear things'
Messages[3]='And our sense of touch to feel things.';
imagesPreloaded = new Array(4);
for (var i = 0; i < MyImages.length ; i++){
imagesPreloaded[i] = new Image(120,120)
imagesPreloaded[i].src=MyImages[i]
}

/*###### function to write image number in sequence, eg 1 of 4*/
function writeImageNumber(){
oSpan=document.getElementById("sp1");
oSpan.innerHTML="Image "+eval(currentIndx+1)+" of "+MyImages.length;
}

/* ####################### we create the functions to go forward and go back ####################### */
function Nexter(){
if (currentIndx<imagesPreloaded.length-1){
	currentIndx=currentIndx+1;
	document.getElementById('text1').innerHTML=Messages[currentIndx];
}else {
		currentIndx=0
	document.getElementById('text1').innerHTML=Messages[currentIndx];
}
writeImageNumber();
}

function Backer(){
if (currentIndx>0){
	currentIndx=currentIndx-1;
	document.getElementById('text1').innerHTML = Messages[currentIndx];
}else {
		currentIndx=3
	document.getElementById('text1').innerHTML = Messages[currentIndx];
}
writeImageNumber();

}
function automaticly() {
document.getElementById('text1').innerHTML = Messages[currentIndx];
currentIndx=currentIndx+1;
var delay = setTimeout("automaticly()",3500);
}

/*###### function to reload the images and text when refresh is pressed ##### */
function setCurrentIndex(){
currentIndx=0;
document.getElementById('text1').innerHTML = Messages[0];
writeImageNumber();
}

Chris

PS. yes, it is me again - I'm following you

deepson2 · September 5, 2009

Hello chris again,

Thanks for your reply , I have solved my this problem . actually i forgot to mark this thread as solved one. :-[

anyways thanks for your reply.

Sign In

[SOLVED] getElementbyId issue.

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information