How can I get this Javascript to work with multiple links on the same page?

Question

As of right now, I am able to get this javascript function to work with one link. However, I would like to use the function with multiple links. I have changed obj to different values and have also tried using more than one function specified with different values for each to get a working prototype, but nothing seems to work. Below is the javascript function from scratch, no changes.

<script type="text/javascript">
    function gObj(obj) {
        var theObj;
        if(document.all){
            if(typeof obj=="string") {
                return document.all(obj);
            }
            else {
                return obj.style;
            }
        }
        if(document.getElementById) {
            if(typeof obj=="string") {
                return document.getElementById(obj);
            }
            else {
                return obj.style;
            }
        }
        return null;
    }
</script>

And the link code:

<div id="axphsh">
<b>Phone:</b><a href="#" onClick="
    gObj('axphsh').style.display='none'; 
    gObj('axphhd').style.display='block'; 
    return false;">Click for Phone Number</a></div>
<div id="axphhd" style="display:none">
<b>Phone:</b> 555-555-5555</div>

Ultimately what I want is to use the link code for multiple numbers on the same page, all hidden by default, then unhidden onClick . But like I said, this only works for one phone number link, then if there are more specified on the same page, the onClick event doesn't work at all. I am thinking it has to do with getElementById since div ids for links can be specified in that manner, but I am not completely sure.

Answer 1

You should learn some basic JS DOM manipulation.

Why do you even use document.all which is not a part of the standard? Use document.getElementyById or document.querySelector .

If all of your boxes with phone numbers were similar you could go with a more general function:

HTML :

<div class="phone-link-container">
    <a href="#" class="show-phone-number">Click for phone number</a>
</div>
<div class="phone-number-container">555-555-555</div>

JS :

function showNumber (e) {
  var link = e.target,
    link_container = e.target.parentNode,
    phone_number = link_container.nextElementSibling;

  link_container.style.display = 'none';
  phone_number.style.display = 'block';
}

var numbers = document.querySelectorAll('.show-phone-number');
Array.prototype.forEach.call(numbers, function (el, i) {
  el.addEventListener('click', showNumber);
});

It selects all elements with a class show-phone-number and binds a function showNumber to the click event for each of them. This function hides parent of the link (which would be phone-link-container in my example) and shows next sibling of the parent (which is phone-link-container ).

http://jsfiddle.net/9ZF9q/2/

In case your JavaScript code is in head you need to wrap all DOM manipulations inside window load callback:

window.addEventListener("load", function () {
  var numbers = document.querySelectorAll('.show-phone-number')
  Array.prototype.forEach.call(numbers, function (el, i) {
    el.addEventListener('click', showNumber);
  });
});

You can read more on functions used there on https://developer.mozilla.org/en-US/docs/DOM/Element.nextElementSibling

When it comes to DOM manipulation if you want to keep the compatibility with all older browsers it's easier to use jQuery library - especially if you're a beginner.