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

Discussion in 'Javascript' started by SM, May 28, 2008.

  1. SM

    SM Guest

    Hello, i need to add a classname to an element <a> using 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_picture(this);
    return false;">image 1</a></li>
    <li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
    return false;">image 2</a></li>
    ....

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


    function show_picture(picture) {
    var source = picture.getAttribute("href");
    var cover = document.getElementById("cover");

    cover.setAttribute("src", source);

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

    Any ideas?

    Thanks
    Marco
     
    SM, May 28, 2008
    #1
    1. Advertising

  2. SM meinte:
    > Hello, i need to add a classname to an element <a> using 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_picture(this);
    > return false;">image 1</a></li>
    > <li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
    > return false;">image 2</a></li>
    > ...
    >
    > <img id="cover" src="<?php echo $cd_cover; ?>" alt="" /></div>
    >
    >
    > function show_picture(picture) {
    > var source = picture.getAttribute("href");
    > var cover = document.getElementById("cover");
    >
    > cover.setAttribute("src", source);
    >
    > //??????doesnt work
    > var el_a = document.getElementById("a");
    > el_a.className = "here";
    > }


    As expected. Use other methods to get element references, like
    getElementsByTagName() (returns a collection of elements with a given
    name), or give your element a name or id and access it with
    getElementById() or getElementsByName().

    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
     
    Gregor Kofler, May 28, 2008
    #2
    1. Advertising

  3. SM

    SM Guest

    Re: How do i getElementById("a") and add a class to it, usingJavaScript, halfway there?

    On May 28, 5:20 pm, Gregor Kofler <> wrote:
    > SM meinte:
    >
    >
    >
    > > Hello, i need to add a classname to an element <a> using 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_picture(this);
    > > return false;">image 1</a></li>
    > > <li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
    > > return false;">image 2</a></li>
    > > ...

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

    >
    > > function show_picture(picture) {
    > > var source = picture.getAttribute("href");
    > > var cover = document.getElementById("cover");

    >
    > > cover.setAttribute("src", source);

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

    >
    > As expected. Use other methods to get element references, like
    > getElementsByTagName() (returns a collection of elements with a given
    > name), or give your element a name or id and access it with
    > getElementById() or getElementsByName().
    >
    > Gregor
    >
    > --http://photo.gregorkofler.at::: Landschafts- und Reisefotografiehttp://web.gregorkofler.com ::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum


    getElementByTagName doesn't work for me. getElementById does work ok.
    I can't imagine having 30+ <a> and 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_picture(this);
    return false;">image 1</a></li>
    <li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
    return false;">image 2</a></li>
    ...
    </ul>


    var els_a =
    document.getElementById("nav_cd_imgs").getElementsByTagName("a").length;

    //testing purposes
    alert(els_a);

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

    //switch on the <a> selected with a className
    ????


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


    Thanks
    Marco
     
    SM, May 28, 2008
    #3
  4. Re: How do i getElementById("a") and add a class to it, using JavaScript,halfway there?

    SM meinte:

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


    Please, don't quote signatures.

    > getElementByTagName doesn't work for me.


    It is getElement*s*ByTagName()

    > getElementById does work ok.
    > I can't imagine having 30+ <a> and 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_picture(this);
    > return false;">image 1</a></li>
    > <li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
    > return false;">image 2</a></li>
    > ...
    > </ul>


    Untested:

    function show_picture(clicked_a) {

    >
    > var els_a =
    > document.getElementById("nav_cd_imgs").getElementsByTagName("a").length;


    var els_a =
    document.getElementById("nav_cd_imgs").getElementsByTagName("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.className == "foo") {
    els_a.className = "bar";
    }
    if(els_a == clicked_a) {
    els_a.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
     
    Gregor Kofler, May 28, 2008
    #4
  5. SM

    SM Guest

    Re: How do i getElementById("a") and add a class to it, usingJavaScript, halfway there?

    On May 28, 6:39 pm, Gregor Kofler <> wrote:
    > SM meinte:
    >
    > >> --http://photo.gregorkofler.at:::Landschafts- und Reisefotografiehttp://web.gregorkofler.com::: meine JS-Spielwiesehttp://www.image2d.com ::: Bildagentur für den alpinen Raum

    >
    > Please, don't quote signatures.
    >
    > > getElementByTagName doesn't work for me.

    >
    > It is getElement*s*ByTagName()
    >
    > > getElementById does work ok.
    > > I can't imagine having 30+ <a> and 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_picture(this);
    > > return false;">image 1</a></li>
    > > <li><a href="<?php echo $cd_img; ?>" onClick="show_picture(this);
    > > return false;">image 2</a></li>
    > > ...
    > > </ul>

    >
    > Untested:
    >
    > function show_picture(clicked_a) {
    >
    >
    >
    > > var els_a =
    > > document.getElementById("nav_cd_imgs").getElementsByTagName("a").length;

    >
    > var els_a =
    > document.getElementById("nav_cd_imgs").getElementsByTagName("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.className == "foo") {
    > els_a.className = "bar";
    > }
    > if(els_a == clicked_a) {
    > els_a.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
     
    SM, May 29, 2008
    #5
  6. Gregor Kofler wrote:
    > SM meinte:
    >> Hello, i need to add a classname to an element <a> using JavaScript.
    >> I've tried a couple of thing with no success.
    >> [...]
    >> //??????doesnt work
    >> var el_a = document.getElementById("a");
    >> el_a.className = "here";
    >> }

    >
    > As expected. Use other methods to get element references, like
    > getElementsByTagName() (returns a collection of elements with a given
    > name), [...]


    A given *tag* name, or better: element type.

    > getElementById() or getElementsByName().


    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
     
    Thomas 'PointedEars' Lahn, May 29, 2008
    #6
  7. Thomas 'PointedEars' Lahn meinte:
    > Gregor Kofler wrote:
    >> SM meinte:
    >>> Hello, i need to add a classname to an element <a> using JavaScript.
    >>> I've tried a couple of thing with no success.
    >>> [...]
    >>> //??????doesnt work
    >>> var el_a = document.getElementById("a");
    >>> el_a.className = "here";
    >>> }

    >> As expected. Use other methods to get element references, like
    >> getElementsByTagName() (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
     
    Gregor Kofler, Jun 1, 2008
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jd
    Replies:
    3
    Views:
    364
  2. jpw
    Replies:
    0
    Views:
    343
  3. Nathan Sokalski

    JavaScript, Windows Mobile, and document.getElementById()

    Nathan Sokalski, May 26, 2009, in forum: ASP .Net Mobile
    Replies:
    4
    Views:
    1,517
  4. Ken Soon
    Replies:
    1
    Views:
    115
    Brian McCauley
    May 11, 2007
  5. Jake Barnes
    Replies:
    2
    Views:
    129
Loading...

Share This Page