Js Sayfadaki tel no.yu butonda gösterme

Merhaba, aşağıdaki kod tıklandığında sayfadaki .frm-register ve .text-center de yazılı telefon numarasının mobilde aranmasını masaüstünde ise ekrana pop-up şeklinde getirilmesini sağlıyoruz.

Mobilde En Yakın Bayiyi Ara yazısından önce de telefonun yazmasını istiyoruz; "0312**22525 En Yakın Bayiyi Ara" şeklinde ama nasıl yaparız.

var v4 = document.createElement('div')
v4.classList.add('partner_d')
var v4 = document.createElement('a')
v4.href = 'tel:' + document.querySelector('.frm-register .text-center').textContent.replace(/[^0-9]/g, '')
v4.innerHTML = `<span class="material-symbols-outlined">
phone_in_talk</span> <span style="margin-left: 10px">En Yakın<br>Bayiyi<br>Ara</span>`
v4.classList = 'btn medical-button pull-right'
v4.onclick = (e) => {
    if (window.outerWidth > 1000) {
        e.preventDefault()
        var lss = document.querySelector('.frm-register .text-center').textContent.replace(/[^0-9 ]/g, '')
        swal(`En Yakın Bayi Üzerinden Başvurmak İçin Hemen \n ${lss} \n Arayın !`, {
            className: "red-bgz",
        });
       
    }

}
trs.appendChild(v4)

Mobilde ve masaüstünde belirli bir elemente tıkladığında farklı işlevler gerçekleştirmek istiyorsunuz. Ayrıca, telefon numarasını "En Yakın Bayiyi Ara" ifadesinden önce göstermek istiyorsunuz. Bu kodda, innerHTML kısmını düzenleyerek telefon numarasını ekleyebiliriz.

var v4 = document.createElement('a')
var phoneNumber = document.querySelector('.frm-register .text-center').textContent.replace(/[^0-9]/g, '')
v4.href = 'tel:' + phoneNumber
v4.innerHTML = `<span class="material-symbols-outlined">phone_in_talk</span> <span style="margin-left: 10px">${phoneNumber}<br>En Yakın<br>Bayiyi<br>Ara</span>`
v4.classList = 'btn medical-button pull-right'
v4.onclick = (e) => {
    if (window.outerWidth > 1000) {
        e.preventDefault()
        var lss = document.querySelector('.frm-register .text-center').textContent.replace(/[^0-9 ]/g, '')
        swal(`En Yakın Bayi Üzerinden Başvurmak İçin Hemen \n ${lss} \n Arayın !`, {
            className: "red-bgz",
        });  
    }
}
trs.appendChild(v4)

Bu kod, telefon numarasını tıklayabilmeyi sağlar ve ek olarak "En Yakın Bayiyi Ara" ifadesini ekler. Masaüstünde ise, swal fonksiyonunu kullanarak telefon numarasını bir uyarı ile gösterir.
Bir not: trs tanımlanmamış görünüyor, bunun ne olduğunu belirtmeniz gerekir, yoksa kod hata verebilir. Eğer belirli bir elementin içine eklemek istiyorsanız document.querySelector veya document.getElementById kullanarak bu elementi seçmeniz gerekmektedir.


Örnek PHP:

<!DOCTYPE html>
<html>
<head>
  <title>Telefon Numarası Ekleme</title>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <style>
    /* İhtiyacınıza bağlı olarak stilleri değiştirin */
    .btn {
      margin: 20px;
      padding: 10px;
      background-color: #4CAF50;
      color: white;
      cursor: pointer;
    }
  </style>
</head>
<body>

<?php
  // Telefon numaranızı buraya ekleyin
  $phoneNumber = "0312**22525";
?>

<div class="frm-register">
  <div class="text-center"><?php echo $phoneNumber; ?></div>
</div>

<button id="callButton" class="btn">En Yakın Bayiyi Ara</button>

<script>
  var v4 = document.querySelector('#callButton');
  var phoneNumber = document.querySelector('.frm-register .text-center').textContent.replace(/[^0-9]/g, '');
  v4.onclick = function (e) {
    if (window.outerWidth <= 1000) {
      // Mobil için
      window.location.href = 'tel:' + phoneNumber;
    } else {
      // Masaüstü için
      e.preventDefault()
      swal(`En Yakın Bayi Üzerinden Başvurmak İçin Hemen \n ${phoneNumber} \n Arayın !`, {
        className: "red-bgz",
      });
    }
  }
</script>

</body>
</html>

Bu kod, telefon numarasını alır ve önceki kodunuzdaki gibi bayiye telefon arama işlemini gerçekleştiren bir bağlantı oluşturur. Telefon numarası aynı zamanda formatlanır ve istenen metin oluşturulur. Tıklanma olayı işlenir ve telefon numarasını içeren bir pop-up mesajı görüntülenir.

var phoneNumber = document.querySelector('.frm-register .text-center').textContent.replace(/[^0-9]/g, '');
var formattedPhoneNumber = phoneNumber.replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1**$2$3$4$5');
var v4 = document.createElement('div');
v4.classList.add('partner_d');
var v4Link = document.createElement('a');
v4Link.href = 'tel:' + phoneNumber;
v4Link.innerHTML = '<span class="material-symbols-outlined">phone_in_talk</span> <span style="margin-left: 10px">' + formattedPhoneNumber + '<br>En Yakın<br>Bayiyi<br>Ara</span>';
v4Link.classList = 'btn medical-button pull-right';
v4Link.onclick = (e) => {
    if (window.outerWidth > 1000) {
        e.preventDefault();
        swal(`En Yakın Bayi Üzerinden Başvurmak İçin Hemen \n ${phoneNumber} \n Arayın!`, {
            className: "red-bgz",
        });
    }
};
v4.appendChild(v4Link);
trs.appendChild(v4);

Hocam chatgpt 4'mü?

var v4Link = document.createElement('a'); kısmı çalışmadı hocam

Aşağıdaki özelliği görmüyor.

.partner_d a {
        font-size: 12px !important;
        display: flex;
        ///flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
        padding: 10px 0;
        border-left: 1.5px solid #fff;
        width: 24%;
        margin: 8px 0;
        background-color: #511567;
        line-height: 1.1;                

    }
    .partner_d a:nth-child(1){
        margin: 0 5;
        border: none;
    }