Jump to content

[SOLVED] getElementbyId issue.


deepson2

Recommended Posts

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

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

 

 

Link to comment
Share on other sites

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

:(

 

Link to comment
Share on other sites

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

Line: 1

 

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

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.