Показать разделение при нажатии двух ссылок

Question

Я делаю плагин для социальной скидки.Когда пользователь нажимает на ссылку Facebook и Instagram, затем отображается окно с купоном.

Div отображается только тогда, когда пользователь нажимает на обе ссылки.Я не очень хорошо разбираюсь в java-скрипте, поэтому, пожалуйста, помогите мне.

<div class="popup">

<div class="social-links">
    <h3>Like + Follow = Get Rs 50 Discount</h3>
    <a href="fb://page/2288133548123387" target="_blank" rel="alternate noopener noreferrer"><img src="images/facebook-logo.png" alt="" />Facebook</a>
    <a href="instagram://user?username=kidsfitter" target="_blank" rel="alternate noopener noreferrer"><img src="images/facebook-logo.png" alt="" />Instagram</a>
</div>  

<div class="coupon">
    <p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>

</div>

Поэтому я хочу, чтобы пользователь щелкнул по ссылке Facebook и странице «Мне нравится», а затем вернулся на веб-сайт и щелкнул ссылку Instagram и следовал за страницей.а затем он вернулся на веб-сайт отображения Div купона.

С уважением

Answer 1

Вот один из способов сделать это (используя css):

var instagramClicked = false;
var facebookClicked = false;

document.getElementById('instagram').addEventListener('click', () => {
  this.instagramClicked = true;
  this.showCoupon();
});

document.getElementById('facebook').addEventListener('click', () => {
  this.facebookClicked = true;
  this.showCoupon();
});

function showCoupon() {
  if (this.instagramClicked && this.facebookClicked) {
    setTimeout(() => document.getElementById('coupon').style = 'display: block', 1000);
  }
}

<div class="popup">

<div class="social-links">
    <h3>Like + Follow = Get Rs 50 Discount</h3>
    <a href="" target="_blank" rel="alternate noopener noreferrer" id="facebook"><img src="images/facebook-logo.png" alt="" />Facebook</a>
    <a href="" target="_blank" rel="alternate noopener noreferrer" id="instagram"><img src="images/facebook-logo.png" alt="" />Instagram</a>
</div>  

<div class="coupon" style="display: none;" id="coupon">
    <p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>

</div>

Answer 2

добавить атрибуты id для ссылок и атрибут стиля, что скрывает ваш купонный блок, как это

<div class="popup">

<div class="social-links">
    <h3>Like + Follow = Get Rs 50 Discount</h3>
    <a href="fb://page/2288133548123387" target="_blank" rel="alternate noopener noreferrer" id="facebook-link"><img src="images/facebook-logo.png" alt="" />Facebook</a>
    <a href="instagram://user?username=kidsfitter" target="_blank" rel="alternate noopener noreferrer" id="instagram-link"><img src="images/facebook-logo.png" alt="" />Instagram</a>
</div>

<div class="coupon" style="display: none;">
    <p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>

Затем добавьте ниже переменные, которые сохраняют ссылки на состояние (нажаты или нет), обработчики щелчков и определяют, какие проверки нажимаются на переменные, подобные этой.

<script>

var facebookClicked = false;
var instagramClicked = false;

document.querySelector("#facebook-link").addEventListener("click", function (e) {
    facebookClicked = true;
    showCoupon();
});

document.querySelector("#instagram-link").addEventListener("click", function (e) {
    instagramClicked = true;
    showCoupon();
});

function showCoupon() {
    if (facebookClicked && instagramClicked) {
        document.querySelector(".coupon").removeAttribute("style");
    }
}

</script>