How do i getElementById("a") and add a class to it, using JavaScript,halfway there?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • SM

    How do i getElementById("a") and add a class to it, using JavaScript,halfway there?

    Hello, i need to add a classname to an element <ausing JavaScript.
    I've tried a couple of thing with no success.


    This is an small piece of my code:
    ....
    <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
    return false;">image 1</a></li>
    <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
    return false;">image 2</a></li>
    ....

    <img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>


    function show_picture(pi cture) {
    var source = picture.getAttr ibute("href");
    var cover = document.getEle mentById("cover ");

    cover.setAttrib ute("src", source);

    //??????doesnt work
    var el_a = document.getEle mentById("a");
    el_a.className = "here";
    }

    Any ideas?

    Thanks
    Marco
  • Gregor Kofler

    #2
    Re: How do i getElementById( &quot;a&quot ;) and add a class to it, using JavaScript,half way there?

    SM meinte:
    Hello, i need to add a classname to an element <ausing JavaScript.
    I've tried a couple of thing with no success.
    >
    >
    This is an small piece of my code:
    ...
    <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
    return false;">image 1</a></li>
    <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
    return false;">image 2</a></li>
    ...
    >
    <img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
    >
    >
    function show_picture(pi cture) {
    var source = picture.getAttr ibute("href");
    var cover = document.getEle mentById("cover ");
    >
    cover.setAttrib ute("src", source);
    >
    //??????doesnt work
    var el_a = document.getEle mentById("a");
    el_a.className = "here";
    }
    As expected. Use other methods to get element references, like
    getElementsByTa gName() (returns a collection of elements with a given
    name), or give your element a name or id and access it with
    getElementById( ) or getElementsByNa me().

    Gregor


    --
    http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
    http://web.gregorkofler.com ::: meine JS-Spielwiese
    http://www.image2d.com ::: Bildagentur für den alpinen Raum

    Comment

    • sheldonlg

      #3
      Re: How do i getElementById( &quot;a&quot ;) and add a class to it, using JavaScript,half way there?

      Gregor Kofler wrote:
      SM meinte:
      >Hello, i need to add a classname to an element <ausing JavaScript.
      >I've tried a couple of thing with no success.
      >>
      >>
      >This is an small piece of my code:
      >...
      ><li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
      >return false;">image 1</a></li>
      ><li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
      >return false;">image 2</a></li>
      >...
      >>
      ><img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
      >>
      >>
      >function show_picture(pi cture) {
      >var source = picture.getAttr ibute("href");
      >var cover = document.getEle mentById("cover ");
      >>
      >cover.setAttri bute("src", source);
      >>
      >//??????doesnt work
      >var el_a = document.getEle mentById("a");
      >el_a.classNa me = "here";
      >}
      >
      As expected. Use other methods to get element references, like
      getElementsByTa gName() (returns a collection of elements with a given
      name), or give your element a name or id and access it with
      getElementById( ) or getElementsByNa me().
      >
      Gregor
      >
      >
      Expanding upon what you said:

      He did that for cover:

      <img id="cover" src="<?php echo $cd_cover; ?>" alt="" />
      var cover = document.getEle mentById("cover ");
      cover.setAttrib ute("src", source);

      But he didn't have an element id="a" for the

      var el_a = document.getEle mentById("a");

      Comment

      • SM

        #4
        Re: How do i getElementById( &quot;a&quot ;) and add a class to it, usingJavaScript , halfway there?

        On May 28, 5:20 pm, Gregor Kofler <use...@gregork ofler.atwrote:
        SM meinte:
        >
        >
        >
        Hello, i need to add a classname to an element <ausing JavaScript.
        I've tried a couple of thing with no success.
        >
        This is an small piece of my code:
        ...
        <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
        return false;">image 1</a></li>
        <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
        return false;">image 2</a></li>
        ...
        >
        <img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
        >
        function show_picture(pi cture) {
        var source = picture.getAttr ibute("href");
        var cover = document.getEle mentById("cover ");
        >
        cover.setAttrib ute("src", source);
        >
        //??????doesnt work
        var el_a = document.getEle mentById("a");
        el_a.className = "here";
        }
        >
        As expected. Use other methods to get element references, like
        getElementsByTa gName() (returns a collection of elements with a given
        name), or give your element a name or id and access it with
        getElementById( ) or getElementsByNa me().
        >
        Gregor
        >
        --http://photo.gregorkof ler.at::: Landschafts- und Reisefotografie http://web.gregorkofle r.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
        getElementByTag Name doesn't work for me. getElementById does work ok.
        I can't imagine having 30+ <aand give an 'id' tag for each. That's
        just BAD programing in my opinion.
        That's why i was looking for a general rule. Since i'm passing 'this'
        in the function as a parameter, i was wondering if i could get the
        parent or something similar and then add a class name. But then again,
        i will need a way to undo that classname when i select another <a>.

        I did more research and came up with this:

        <ul id="nav_cd_imgs ">
        ...
        <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
        return false;">image 1</a></li>
        <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
        return false;">image 2</a></li>
        ...
        </ul>


        var els_a =
        document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a").length ;

        //testing purposes
        alert(els_a);

        //switch off all className in all <a>
        for (i=0; i<els_a; i++) {
        ?????
        }

        //switch on the <aselected with a className
        ????


        I just need to find how to get the <aselected. Any hints, meanwhile,
        i'll continue searching the web and post the answer here if i find
        something.


        Thanks
        Marco

        Comment

        • Gregor Kofler

          #5
          Re: How do i getElementById( &quot;a&quot ;) and add a class to it, using JavaScript,half way there?

          SM meinte:
          >--http://photo.gregorkof ler.at::: Landschafts- und Reisefotografie http://web.gregorkofle r.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
          Please, don't quote signatures.
          getElementByTag Name doesn't work for me.
          It is getElement*s*By TagName()
          getElementById does work ok.
          I can't imagine having 30+ <aand give an 'id' tag for each. That's
          just BAD programing in my opinion.
          What do you expect? How would your original approach have distinguished
          between the different anchor-elements?
          That's why i was looking for a general rule. Since i'm passing 'this'
          in the function as a parameter, i was wondering if i could get the
          parent or something similar and then add a class name. But then again,
          i will need a way to undo that classname when i select another <a>.
          I did more research and came up with this:
          >
          <ul id="nav_cd_imgs ">
          ...
          <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
          return false;">image 1</a></li>
          <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
          return false;">image 2</a></li>
          ...
          </ul>
          Untested:

          function show_picture(cl icked_a) {
          >
          var els_a =
          document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a").length ;
          var els_a =
          document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a");
          //testing purposes
          alert(els_a);
          >
          //switch off all className in all <a>
          for (i=0; i<els_a; i++) {
          for(var i = els_a.length; i--;) {
          if(els_a[i].className == "foo") {
          els_a[i].className = "bar";
          }
          if(els_a[i] == clicked_a) {
          els_a[i].className = "foo";
          }
          }


          Gregor


          --
          http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
          http://web.gregorkofler.com ::: meine JS-Spielwiese
          http://www.image2d.com ::: Bildagentur für den alpinen Raum

          Comment

          • SM

            #6
            Re: How do i getElementById( &quot;a&quot ;) and add a class to it, usingJavaScript , halfway there?

            On May 28, 6:39 pm, Gregor Kofler <use...@gregork ofler.atwrote:
            SM meinte:
            >
            --http://photo.gregorkof ler.at:::Landsc hafts- und Reisefotografie http://web.gregorkofle r.com::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum
            >
            Please, don't quote signatures.
            >
            getElementByTag Name doesn't work for me.
            >
            It is getElement*s*By TagName()
            >
            getElementById does work ok.
            I can't imagine having 30+ <aand give an 'id' tag for each. That's
            just BAD programing in my opinion.
            >
            What do you expect? How would your original approach have distinguished
            between the different anchor-elements?
            >
            That's why i was looking for a general rule. Since i'm passing 'this'
            in the function as a parameter, i was wondering if i could get the
            parent or something similar and then add a class name. But then again,
            i will need a way to undo that classname when i select another <a>.
            I did more research and came up with this:
            >
            <ul id="nav_cd_imgs ">
            ...
            <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
            return false;">image 1</a></li>
            <li><a href="<?php echo $cd_img; ?>" onClick="show_p icture(this);
            return false;">image 2</a></li>
            ...
            </ul>
            >
            Untested:
            >
            function show_picture(cl icked_a) {
            >
            >
            >
            var els_a =
            document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a").length ;
            >
            var els_a =
            document.getEle mentById("nav_c d_imgs").getEle mentsByTagName( "a");
            >
            //testing purposes
            alert(els_a);
            >
            //switch off all className in all <a>
            for (i=0; i<els_a; i++) {
            >
            for(var i = els_a.length; i--;) {
            if(els_a[i].className == "foo") {
            els_a[i].className = "bar";
            }
            if(els_a[i] == clicked_a) {
            els_a[i].className = "foo";
            }
            Gregor,
            Awesome! I've try it and it works perfectly! Many thanks.
            My mistake, i didn't not explain correctly what i was searching for.
            At the end, it all work out for the best!

            Thanks again
            Marco

            Comment

            • Thomas 'PointedEars' Lahn

              #7
              Re: How do i getElementById( &quot;a&quot ;) and add a class to it, using JavaScript,half way there?

              Gregor Kofler wrote:
              SM meinte:
              >Hello, i need to add a classname to an element <ausing JavaScript.
              >I've tried a couple of thing with no success.
              >[...]
              >//??????doesnt work
              >var el_a = document.getEle mentById("a");
              >el_a.classNa me = "here";
              >}
              >
              As expected. Use other methods to get element references, like
              getElementsByTa gName() (returns a collection of elements with a given
              name), [...]
              A given *tag* name, or better: element type.
              getElementById( ) or getElementsByNa me().
              Yes, *these* are about element's IDs and names.


              PointedEars
              --
              realism: HTML 4.01 Strict
              evangelism: XHTML 1.0 Strict
              madness: XHTML 1.1 as application/xhtml+xml
              -- Bjoern Hoehrmann

              Comment

              • Gregor Kofler

                #8
                Re: How do i getElementById( &quot;a&quot ;) and add a class to it, using JavaScript,half way there?

                Thomas 'PointedEars' Lahn meinte:
                Gregor Kofler wrote:
                >SM meinte:
                >>Hello, i need to add a classname to an element <ausing JavaScript.
                >>I've tried a couple of thing with no success.
                >>[...]
                >>//??????doesnt work
                >>var el_a = document.getEle mentById("a");
                >>el_a.classNam e = "here";
                >>}
                >As expected. Use other methods to get element references, like
                >getElementsByT agName() (returns a collection of elements with a given
                >name), [...]
                >
                A given *tag* name, or better: element type.
                Typo. Could cause some confusion. Sorry.

                Gregor



                --
                http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
                http://web.gregorkofler.com ::: meine JS-Spielwiese
                http://www.image2d.com ::: Bildagentur für den alpinen Raum

                Comment

                Working...