A simple javascript script gone bad!

Question

Hello All.

I'm trying to set up a simple script to toggle a link from a checkbox.

The script I have below works, however it only changes the href of the FIRST instance.

I'm sure there's probably a much simpler way of doing this too, as I have a lot of redundant code.

Can anyone help shed some light on this for me?

Thanks! Nick

<script type="text/javascript">
function toggleLinks () {
    //instant attraction
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C1") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C15"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C15") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C1";

    //fashion bible
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C4") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C16"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C16") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C4"; 

    //underground dating seminar
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C5") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C17"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C17") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C5"; 

    //planning the perfect date
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C6") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C18"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C18") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C6"; 

    //how to beat approach anxiety
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C7") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C19"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C19") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C7"; 

    //interviews with naturals
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C8") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C20"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C20") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C8"; 

    //crocodile style
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C9") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C21"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C21") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C9"; 

    //pheromone kids 10 minute seduction
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C10") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C22"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C22") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C10"; 

    //joe natural uncensored
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C11") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C23"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C23") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C11"; 

    //buzzy: master of threesomes
    if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C12") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C24"; 
    else if (document.getElementById('add_to_cart').href == "http://bradp.com/dlg/sell.php?prodData=cb%2C24") document.getElementById('add_to_cart').href = "http://bradp.com/dlg/sell.php?prodData=cb%2C12"; 

}
</script>

Answer 1

Try to comply W3C standards and don't use same id for more than one element.

If you really have to do this way, take a look getElementsByTagName

Answer 2

In HTML, the ID attribute is unique. There should only be one element on any given page with the same ID.

As such, document.getElementById is only expecting to find one element, and so only returns one. You'll need a much more sophisticated setup to catch all of the links, which really should share a class, not an ID.

The sort of behavior you're looking for - getting collections of elements and operating on them in that fashion - is doable through something like jQuery, since it will automatically loop through the elements for you. Otherwise, you'll be doing the loops yourself once you manage to select all the elements you want.

Answer 3

You should not use the same id for more than one element. Use a class instead. Once you do that you can use jQuery to do sumething like this:

jQuery(".myClass").each(function() {
     this.href='...';
});