Web Analytics Made Easy -
StatCounter getElementsByName? - CodingForum

Announcement

Collapse
No announcement yet.

getElementsByName?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • getElementsByName?

    Hi all,
    I am having difficulty getting my table to display images from an array (which holds URLs to images). I used the code: document.getElementByID("cell").src = array[ranNum]; where I named all my elements in the table: "cell". However, this only worked on the first "cell" because (I presume) that the getElementByID only works once. I then tried using getElementsByName, and named all of the cells with the same name, however this did not work at all. The line reads: document.getElementsByName("cell").src = array[ranNum];

    Is there anything wrong with the latter statement? Does .src work on getElementsByName?

  • #2
    You can't assign a property to all members of an array at once.

    You'll need something like this:
    Code:
    <!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/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/" />
    <style type="text/css">
    </style>
    <script type="text/javascript">
    // <![CDATA[
    
    function switchImages()
    	{
    	var imgs = document.getElementsByName("my_img");
    	[COLOR="Red"]for (var i=0;i<imgs.length;i++) imgs[i].src = "2.jpg";[/COLOR]
    	}
    
    // ]]>
    </script>
    </head>
    <body>
    
    <img src="1.jpg" name="my_img" /><br />
    <img src="1.jpg" name="my_img" /><br />
    
    <br /><input type="button" value="click me" onclick="switchImages()" />
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    [email protected]

    Comment


    • #3
      I've given that code a try but it doesn't work

      My Javascript code reads like so:

      Code:
      var images = new Array();
      	images[0] = "[I]url to image[/I]";
      	images[1] = "[I]url to image[/I]";
      	images[2] = "[I]url to image[/I]";
      	var ranNo = Math.floor(Math.random()*3);
      	document.getElementsByName("image").src = arrayOfImages[ranNo];
      And the XHTML code reads like so:

      Code:
      <table>
      	<tr><td><img name="image" alt="Image"></td><td><img name="image" alt="Image"></td><td><img name="image" alt="Image"></td></tr>
      </table>
      I need each of the images in the table (named 'image') to have the image selected by the Javascript code.

      Comment


      • #4
        document.getElementsByName("image").src
        getElementsByName returns reference to an array of elements. So you need to index that array like
        Code:
        document.getElementsByName("image")[0].src=
        document.getElementsByName("image")[1].src=
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment


        • #5
          Thanks for that! It works now

          So let me get this straight:
          The getElementsByName method stores each of the elements with the same name into an array? So, if I have 10 images all with the same name and call the getElementsByName method on them it will create an array which holds 10 elements?

          Comment


          • #6
            Originally posted by webguy08 View Post
            Thanks for that! It works now

            So let me get this straight:
            The getElementsByName method stores each of the elements with the same name into an array? So, if I have 10 images all with the same name and call the getElementsByName method on them it will create an array which holds 10 elements?
            Correct. That's why it is getElementsByName

            It will return an array even if there is only one element by that name, and you'd have to reference it as an array. I.e. getElementsByName('image')[0].

            Excerpt from http://programming.top54u.com/post/J...yTagName.aspx:

            Javascript DOM provides a getElementsByTagName method that can be accessed using the documentElement property of document object. getElementsByTagName method returns the node list array of HTML document elements present in the HTML web page. You can pass the name of the particular HTML tag such as div, span, p etc whose list of array you want to collect. documentElement property of document object returns the root HTML element of the HTML document. Later on, in Javascript tutorials we will discuss about the getElementsByTagName method to access the nodes of XML documents also.
            And in essence, getElementsByName and getElementsByTagName work the same.
            Last edited by Eldarrion; Apr 1, 2009, 12:17 PM. Reason: Adding aditional explanation.
            The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

            How to ask smart questions?

            Comment


            • #7
              Seriously, do people even read my posts?
              Feel free to e-mail me if I forget to respond ;)
              [email protected]

              Comment

              Working...
              X