Code button ẩn hiển dữ liệu phone text bằng Javascript

Trong quá trình xây dựng website, nếu bạn đang đã gặp phải vấn đề về việc tạo button ẩn hiện một phần tử nào đó, có thể là một phần nội dung, quảng cáo hay số điện thoại và bất cứ thứ gì trên trang. Trong bài viết này, toantuoity.com xin chia sẻ cho bạn đọc một số giải pháp như dưới đây.

Bước 1:Code tạo Toggle ẩn/hiện một phần tử

Code button ẩn hiển dữ liệu phone text bằng Javascript là một tính năng cho phép người dùng ẩn hoặc hiển thị số điện thoại khi cần thiết. Khi người dùng nhấn vào nút “Code”, đoạn mã Javascript sẽ được thực thi để ẩn hoặc hiển thị số điện thoại dựa trên logic được xác định trước. Điều này giúp bảo vệ thông tin cá nhân của người dùng và tạo ra trải nghiệm tốt hơn khi sử dụng ứng dụng web.

<div class="grid-container">
  <button onclick="myFunction()">Bấm vào đây</button>
 
  <div id="myDIV">
    Chào mừng bạn đến với website của Toàn
    hãy liên hệ với Toàn theo số 0935961044
  </div>
</div>

<style>
button {
  margin: auto;
  width: 100px;
  height: 30px;
  margin-bottom: 10px;
  display: block;
}
#myDIV {
  width: 100%;
  padding: 10px;
  text-align: center;
  height: 80px;
  background: #00FF66;
  margin-bottom: 30px;
  display: inline-block;
}
</style>

<script type="text/javascript">
  function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
  }
</script>

Bước 2:Code hiển thị thông báo

<button name="button" value="OK" type="button" onclick="phone()">Bấm để xem số điện thoại</button>  
<script>  
  function phone(){  
    alert("Số hotline của Toàn là 0935.961.044");  
  }  
</script>