How to make dynamic phone number clickable for mobile users

Question

I have phone numbers on my website that are automatically inserted via a JavaScript to display either a default phone number (that's defined within the primary JavaScript) or change to a variable phone number if the webpage is accessed by a URL string with the phone number in it - for example:

http:www.website.com?tfid=8005551212 

What I need to do is make the phone numbers clickable for mobile users so that whichever phone number appears they can click it and it will call the phone number.

I understand that if you wrap the phone number with an anchor with the tel: attribute it will launch the click-to-call function, but how can the tag be written so it will allow for the phone number variable to be passed? ex:

<a href="tel:variable telephone number">variable telephone number</a>

Answer 1

Do you mean this? Please rewrite your script to not use document.write. If you ever call one of your functions after the page loaded it will wipe the page.

document.getElementById("phonenumber").innerHTML='<a href="tel:'+phone_number+'">'+phone_number+'</a>';

Like this, using your original code

<div id="phonenumber">Call:  </div>

---

function getPhone() {
   var phone = get_named_cookie("MM_TrackableNumber");
   if (phone == null) phone = "8885551313";
   return formatnumber(phone);
}

window.onload=function() {
  document.getElementById("phonenumber").innerHTML+=getPhone();
}                            

---

Full code

   function pixelfire(debug) {
       var phone_number = getVar("phone_number");
       var keyword = getVar("keyword");
       var source = getVar("source");
       if (keyword) {
           setcookie(keyword, phone_number);
       } else {
           var keyword = get_named_cookie("MM_Keyword");
           var phone_number = get_named_cookie("MM_TrackableNumber");
           return keyword || null;
       }
       var campaign = getVar("campaign");
       var content = getVar("content");
       var url = "http://www.mongoosemetrics.com/pixelfire.php?phone_number=" + phone_number;
       var url = url + "&keyword=" + keyword;
       var url = url + "&source=" + source;
       var url = url + "&campaign=" + campaign;
       var url = url + "&content=" + content;
       myImage = new Image();
       myImage.src = url;
   }

   function setcookie(key, tn, path) {
       index = -1;
       var today = new Date();
       today.setTime(today.getTime());
       var cookie_expire_date = new Date(today.getTime() + (365 * 86400000));
       document.cookie = "MM_TrackableNumber=" + tn + ";path=/;expires=" + cookie_expire_date.toGMTString();
       document.cookie = "MM_Keyword=" + key + ";path=/;expires=" + cookie_expire_date.toGMTString();
   }
   function getPhone() {
       var phone = get_named_cookie("MM_TrackableNumber");
       if (phone == null) phone = "8885551313";
       return formatnumber(phone);
   }

   function get_named_cookie(name) {
       if (document.cookie) {
           index = document.cookie.indexOf(name);
           if (index != -1) {
               namestart = (document.cookie.indexOf("=", index) + 1);
               nameend = document.cookie.indexOf(";", index);
               if (nameend == -1) {
                   nameend = document.cookie.length;
               }
               var ret_one = document.cookie.substring(namestart, nameend);
               return ret_one;
           }
       }
   }
   //function to format the phonenumber to (123) 456-7890
   function formatnumber(num) {
       _return = "1-";
       var ini = num.substring(0, 3);
       _return += ini + "-";
       var st = num.substring(3, 6);
       _return += st + "-";
       var end = num.substring(6, 10);
       _return += end;
       return _return;
   }

   function getVar(name) {
       get_string = document.location.search;
       return_value = '';

       do { //This loop is made to catch all instances of any get variable.
           name_index = get_string.indexOf(name + '=');

           if (name_index != -1) {
               get_string = get_string.substr(name_index + name.length + 1, get_string.length - name_index);

               end_of_value = get_string.indexOf('&');
               if (end_of_value != -1) value = get_string.substr(0, end_of_value);
               else value = get_string;

               if (return_value == '' || value == '') return_value += value;
               else return_value += ', ' + value;
           }
       } while (name_index != -1)

       //Restores all the blank spaces.
       space = return_value.indexOf('+');
       while (space != -1) {
           return_value = return_value.substr(0, space) + ' ' + return_value.substr(space + 1, return_value.length);

           space = return_value.indexOf('+');
       }

       return (return_value);
   }
   window.onload = function () {
       key = getVar("keyword");
       tn = getVar("tfid");
       source = getVar("source");
       content = getVar("content");
       campaign = getVar("campaign");
       if (tn != "") {
           setcookie(key, tn);
       }
       var phone_number = getPhone();
       document.getElementById("phonenumber").innerHTML+='<a href="tel:'+phone_number+'">'+phone_number+'</a>';
   }