0

I have the following piece of code in a script tag that I need to get working for all #tel ID elements on the page. I can only get it to work for the first #tel element. I've been trying to use .each function - but no luck...

The reason being is that I can't seem to get the ACF repeater URL to suit my needs here. The Advanced section of the dynamic content link part is not displaying. So I am trying to make a hack in an HTML widget for this. But I need it to work for all buttons with button ID #tel.

Here's the code:

var link = document.getElementById('tel');
var href = link.getAttribute('href');

link.setAttribute('href', href.replace('http://', 'tel:'));
<div class="elementor-button-wrapper">
    <a href="http://44400907" class="elementor-button-link elementor-button elementor-size-xs" role="button" id="tel">
        <span class="elementor-button-content-wrapper">
            <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">
                44 40 09 07
            </span>
        </span>
    </a>
</div>
juliomalves
  • 42,130
  • 20
  • 150
  • 146
Jesper Hansen
  • 3
  • 1
  • 1
    IDs are unique. There can only be one element with one ID. Use classes or data attributes. – Brahma Dev Jun 16 '21 at 11:29
  • 1
    FYI: [Why are duplicate ids not allowed in HTML](https://stackoverflow.com/questions/48240240/why-are-duplicate-ids-not-allowed-in-html) – Reyno Jun 16 '21 at 11:30

1 Answers1

0

In HTML/javascript element IDs must be unique. So in your case you can use class for that:

var links = document.querySelectorAll('.tel');
for(let i = 0; i < links.length; i++)
{
  let link = links[i];
  var href = link.getAttribute('href');

  link.setAttribute('href', href.replace('http://', 'tel:'));
}
<div class="elementor-button-wrapper">
            <a href="http://44400907" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 07</span>
                </span>
            </a>
    </div>
    
<div class="elementor-button-wrapper">
            <a href="http://44400908" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 08</span>
                </span>
            </a>
    </div>

<div class="elementor-button-wrapper">
            <a href="http://44400909" class="elementor-button-link elementor-button elementor-size-xs tel" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text elementor-inline-editing" data-elementor-setting-key="text" data-elementor-inline-editing-toolbar="none">44 40 09 09</span>
                </span>
            </a>
    </div>
vanowm
  • 9,466
  • 2
  • 21
  • 37
  • Dohh! - Sometimes you are just so focused on the goal :/ that you can't see the issue. Thx for the reminder. The anchor is now a child of the class '.tel' the 'var links = document.querySelectorAll('.tel');' should be '.tel a', right? – Jesper Hansen Jun 16 '21 at 12:16
  • So if I also want to remove blank spaces from the URLs. How can I add this to the same script? – Jesper Hansen Jun 16 '21 at 13:25
  • Yes, `.tel a` is correct. I assume only numbers allowed, in that case a simple regex will do: `href.replace('http://', 'tel:').replace(/[^\d]/g, '')` – vanowm Jun 17 '21 at 02:21
  • Thanks a lot. Very helpful. I ended up changing the class to a custom data type. Since I can control that directly on the link itself. Thank you for all you help. – Jesper Hansen Jun 17 '21 at 06:00