We wish to display a “Click to Call” button only to visitors from the US and only between the hours of 9 to 5.
We did SORT OF create code that works - but not if you navigate off the page and then back. Then it screws up and shows the button even if you are not in the USA.
I think maybe it is not re-checking the “country” and therefore displaying when it shouldn’t. (we tested here in the US by changing the country to Canada and altering the times to be true or not during the test) The code is below:
Suggestions on how to fix this, or how to replace it with something else are welcome. But it must only be JS and HTML code.
Thank you!
<!-- Javascript to check time & country for phone and tablet versions-->
<div class="hidden-desktop">
<script>
window.addEventListener("load",function(){
var currentTime = new Date();
var hours = currentTime.getHours();
var call = document.getElementById("callMe");
if(hours>=9 && hours<=17){
call.style.display = "inline";
}else{
call.style.display = "none";}
});
</script>
<script>
window.addEventListener("load",function(){
$.getJSON("https://freegeoip.net/json/",function(data){
var country = data.country_name;
var nation = document.getElementById("callMe");
if(country != 'United States'){
nation.style.display = "none";}
})
});
</script>
<p class="view-cart pull-right">
<a href="tel:1800333444" id="callMe" ><img src="../images/PHONE-icon.png" ></a>
</p>
</div>
…and this is up in the head:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>