[HTML|JavaScript] Pokaż cały numer telefonu po kliknięciu

Chesz wyświetlić na stronie numer telefonu, ale nie koniecznie od razu pełny? Jeśli tak, czytaj dalej.

Gdy zajdzie potrzeba wyświetlenia numer telefonu na stronie internetowej, nie koniecznie trzeba wyświetlać go od razu w całości. Można utrudnić zbieranie numerów przez roboty i wyświetlić na starcie np. 3 pierwsze cyfry. Gdy zainteresowany użytkownik będzie potrzebował całego numeru może kliknąć "Pokaż pełny numer", który wtedy uzyska.

W tym wpisie pokaże jak stworzyć właśnie taką formę prezentacji numeru telefonu. Zatem założenie jest takie: statycznie w kodzie html wstawiamy 3 pierwsze cyfry numeru i dopiero po kliknięciu w link "Pokaż cały numer" wyświetlony zostanie on w pełnej postaci.

Kod HTML

<p>Numer telefonu: <span id="phone">123 *** ***</span> <a href="#" id="showNumber">Pokaż cały numer</a>

Kod JavaScript

function showNumber(event) {

    const displayed = 0;

    if(event.type == 'click') {

        displayed = 1;
    
    }
    
    const showNumberLink = document.getElementById('showNumber');
    const phone  = document.getElementById('phone');
    const fullNumber = '123 456 789'; // Tu podaj pełny numer telefonu
    
    phone.textContent = fullNumber;
    
    if(displayed == 1) {
    
        showNumberLink.style.display = 'none';
    
    }
    
    showNumberLink.addEventListener("click", submitDisabled, false);
    
}

document.addEventListener("DOMContentLoaded", showNumber, false);