www.webdeveloper.com
Results 1 to 15 of 15

Thread: I need help changing my javascript code to getelementbyId

  1. #1
    Join Date
    Dec 2009
    Posts
    11

    I need help changing my javascript code to getelementbyId

    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' />

  2. #2
    Join Date
    May 2007
    Posts
    129
    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:

    Code:
    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:

    Code:
    window.onload = function(){
    
    //your code here
    
    };

  3. #3
    Join Date
    Dec 2009
    Posts
    11
    Thanx for the reply, but i think i didn't implement the new code right because now my speakers don't work.

    New Script
    Code:
    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
    Code:
            <img id='sp1' src='images/Sp1-1.gif' alt='speaker' />

  4. #4
    Join Date
    Dec 2009
    Posts
    11
    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.

  5. #5
    Join Date
    May 2007
    Posts
    129
    your HTML element attributes should to be enclosed in double quotes. If you alert speak1 what do you get?

  6. #6
    Join Date
    Dec 2009
    Posts
    11
    pardon my ignorance but what does alert mean?

  7. #7
    Join Date
    May 2007
    Posts
    129
    an alert will show a message box with some content in it. It is the most basic form of debugging for JavaScript, try this:

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

  8. #8
    Join Date
    Dec 2009
    Posts
    11
    it says null

  9. #9
    Join Date
    May 2007
    Posts
    129
    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.

  10. #10
    Join Date
    Dec 2009
    Posts
    11
    if i put the script after the speaker html i get this as the alert [object HTMLImageElement]. is this what we are goin for?

  11. #11
    Join Date
    Dec 2009
    Posts
    11
    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

  12. #12
    Join Date
    Dec 2009
    Posts
    11
    new problem after changing the the other speakers' code, only half of the speakers work

  13. #13
    Join Date
    Dec 2009
    Posts
    11
    it was a coding mistake. my fault. RESOLVED!!!! thanx again

  14. #14
    Join Date
    May 2012
    Posts
    3

    password javascript

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

  15. #15
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    Mansoor, selling something?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles