I need help changing my javascript code to getelementbyId

[DonElian]

i have javascript that switches 2 different sized speaker images to make them appear to be "bumping". the code works just fine but now I am wanting an xhtml strict site which doesn't allow the name attribute for images. I am still very new to javascript and need some tutoring on how to change my script to the getelementbyId function. Thank you so much for the help.

Script=
var speak1Img = new Array(2);
speak1Img[0]="http://www.doneljortolian.com/images/Sp1-1.gif";
speak1Img[1]="http://www.doneljortolian.com/images/Sp1-2.gif";

var newSpeak1 = 0;
var totalSp1 = speak1Img.length;

function cycleSp1() {
newSpeak1++;
if (newSpeak1 == totalSp1) {
newSpeak1 = 0;
}
document.speak1.src=speak1Img[newSpeak1];
setTimeout("cycleSp1()", 1000);
}

var speak2Img = new Array(2);
speak2Img[0]="http://www.doneljortolian.com/images/Sp2-1.gif";
speak2Img[1]="http://www.doneljortolian.com/images/Sp2-2.gif";

var newSpeak2 = 0;
var totalSp2 = speak2Img.length;

function cycleSp2() {
newSpeak2++;
if (newSpeak2 == totalSp2) {
newSpeak2 = 0;
}
document.speak2.src=speak2Img[newSpeak2];
setTimeout("cycleSp2()", 800);
}

var speak3Img = new Array(2);
speak3Img[0]="http://www.doneljortolian.com/images/Sp3-1.gif";
speak3Img[1]="http://www.doneljortolian.com/images/Sp3-2.gif";

var newSpeak3 = 0;
var totalSp3 = speak3Img.length;

function cycleSp3() {
newSpeak3++;
if (newSpeak3 == totalSp3) {
newSpeak3 = 0;
}
document.speak3.src=speak3Img[newSpeak3];
setTimeout("cycleSp3()", 400);
}

var speak4Img = new Array(2);
speak4Img[0]="http://www.doneljortolian.com/images/Sp4-1.gif";
speak4Img[1]="http://www.doneljortolian.com/images/Sp4-2.gif";

var newSpeak4 = 0;
var totalSp4 = speak4Img.length;

function cycleSp4() {
newSpeak4++;
if (newSpeak4 == totalSp4) {
newSpeak4 = 0;
}
document.speak4.src=speak4Img[newSpeak4];
setTimeout("cycleSp4()", 200);
}

var speak5Img = new Array(2);
speak5Img[0]="http://www.doneljortolian.com/images/Sp1-1.gif";
speak5Img[1]="http://www.doneljortolian.com/images/Sp1-2.gif";

var newSpeak5 = 0;
var totalSp5 = speak5Img.length;

function cycleSp5() {
newSpeak5++;
if (newSpeak5 == totalSp5) {
newSpeak5 = 0;
}
document.speak5.src=speak5Img[newSpeak5];
setTimeout("cycleSp5()", 1000);
}

var speak6Img = new Array(2);
speak6Img[0]="http://www.doneljortolian.com/images/Sp3-1.gif";
speak6Img[1]="http://www.doneljortolian.com/images/Sp3-2.gif";

var newSpeak6 = 0;
var totalSp6 = speak6Img.length;

function cycleSp6() {
newSpeak6++;
if (newSpeak6 == totalSp6) {
newSpeak6 = 0;
}
document.speak6.src=speak6Img[newSpeak6];
setTimeout("cycleSp6()", 400);
}

var speak7Img = new Array(2);
speak7Img[0]="http://www.doneljortolian.com/images/Sp4-1.gif";
speak7Img[1]="http://www.doneljortolian.com/images/Sp4-2.gif";

var newSpeak7 = 0;
var totalSp7 = speak7Img.length;

function cycleSp7() {
newSpeak7++;
if (newSpeak7 == totalSp7) {
newSpeak7 = 0;
}
document.speak7.src=speak7Img[newSpeak7];
setTimeout("cycleSp7()", 200);
}

html=
<img id='sp1' name='speak1' src='images/Sp1-1.gif' alt='speaker' />
<img id='sp3' name='speak3' src='images/Sp3-1.gif' alt='speaker' />
<img id='sp4' name='speak4' src='images/Sp4-1.gif' alt='speaker' />
<img id='sp2' name='speak2' src='images/Sp2-1.gif' alt='speaker' />
<img id='sp7' name='speak7' src='images/Sp7-1.gif' alt='speaker' />
<img id='sp6' name='speak6' src='images/Sp6-1.gif' alt='speaker' />
<img id='sp5' name='speak5' src='images/Sp5-1.gif' alt='speaker' />

[web_bert]

you need to get a reference to the node in the dom and then instead of using document.[name].src you can use ref.src:

var speak1 = document.getElementById( 'sp1' );
speak1.src = speak1Img[newSpeak1];

just make sure that the elements are in the dom before using getElementById, the best thing to do is use an onload event to make sure the document is loaded:

window.onload = function(){

//your code here

};

[DonElian]

Thanx for the reply, but i think i didn't implement the new code right because now my speakers don't work.

New Script

var speak1 = document.getElementById( 'sp1' );
var speak1Img = new Array(2);
  speak1Img[0]="http://www.doneljortolian.com/images/Sp1-1.gif";
  speak1Img[1]="http://www.doneljortolian.com/images/Sp1-2.gif";

var newSpeak1 = 0;
var totalSp1 = speak1Img.length;

function cycleSp1() {
  newSpeak1++;
  if (newSpeak1 == totalSp1) {
    newSpeak1 = 0;
  }
  speak1.src = speak1Img[newSpeak1];
  setTimeout("cycleSp1()", 1000);
}

New html

        <img id='sp1' src='images/Sp1-1.gif' alt='speaker' />

[DonElian]

by the way all my javascript is set to a window.onload event at the end of the file so not to worry about that.

[web_bert]

your HTML element attributes should to be enclosed in double quotes. If you alert speak1 what do you get?

[DonElian]

pardon my ignorance but what does alert mean?

[web_bert]

an alert will show a message box with some content in it. It is the most basic form of debugging for JavaScript, try this:

var speak1 = document.getElementById( 'sp1' );
alert( speak1);

[DonElian]

it says null

[web_bert]

So this is why your speakers are not working, you need to make sure the img element is in the dom, with the id sp1 before the document.getElementbyId code is invoked.

[DonElian]

if i put the script after the speaker html i get this as the alert [object HTMLImageElement]. is this what we are goin for?

[DonElian]

i assume it is because when i put the code u gave me after the speaker html it works. thank you for your time. i had the script loading up in the head, I'll just move it all to the end of the page

[DonElian]

new problem after changing the the other speakers' code, only half of the speakers work

[DonElian]

it was a coding mistake. my fault. RESOLVED!!!! thanx again

[Mansoor007]

<html>
<head>
<script type="text/javascript">
function va()
{

var a=document.getElementById("pwd").value;
var b=document.getElementById("pwd1").value;


if(a.length==6 || a.length==7 || a.length==8 || a.length==9 || a.length==10)
{

if(a==b)
alert("password match");
else
alert("password did not match");
}
else
{
alert("Enter password betweeen 6-10 charcters");
}

}







</script>
</head>

<body>
<form id="f1">
password <input type="password" id="pwd" />
confirm <input type="password" id="pwd1" />

<input type="button" name="Confir" value="Submit" onclick="va()"/>

</form>



</body>
</html>

[Padonak]

Mansoor, selling something?