Updating href does not change where the link takes me

Question

I am building a chrome extension to update all of the hrefs in a page to call a phone number (phone_number) instead of link to a page (/phone/phone_number) with the phone number listed again... I'm testing right now by hard coding the phone number that will be click-to-called. Unfortunately, even after updating the href, the link still takes me to the original page "/phone/phone_number", and does not trigger the call alert dialog on chrome.

window.onload = async () => {
  await sleep(3000);
  var phone_blocks = Array.prototype.slice.call(document.getElementsByClassName("px-5 py-7 pearl td-n card flat"))

  phone_blocks.forEach(block => {
    block.href = "tel:8607817749"
  });

}
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

As you can see below, the href is changed per the console, but when I click it, I'm directed to the page that the href originally linked to - not the phone-number. If I right click and "copy link address", then I receive "tel:+18607817749" in my clipboard. Why is clicking it taking me to the old link?