I am creating a HTML/JavaScript page that displays world clocks, However I ran into a problem with the clocks not adjusting to the AM/PM correctly, and also not staying in the standard time format. I realize this is because the if statement that makes the session change to = ‘PM’ only works for the time zone it gets. Also my code only gets the time and puts it in the California slot because that is the time zone I am in, so if you open this code in a time zone other than pacific time, all of the world clocks will be incorrect. Is it possible to keep my clocks in a standard time format and also be the correct AM or PM?
<body>
<div id="container">
<div id="clockContainer">
<div id="titleContainer">
<p id="title">California</p>
<p id="clock" class='clock'></p>
</div>
<div id="titleContainer">
<p id="title">New York</p>
<p id="york" class='clock'></p>
</div>
<div id="titleContainer">
<p id="title">Hawaii</p>
<p id="hawaii" class='clock'></p>
</div>
</div>
<div id="clockContainer">
<div id="titleContainer">
<p id="title">Dubai</p>
<p id="dubai" class='clock'></p>
</div>
<div id="titleContainer">
<p id="title">Seconds</p>
<p id="seconds" class='clock'></p>
</div>
<div id="titleContainer">
<p id="title">London</p>
<p id="london" class='clock'></p>
</div>
</div>
<div id="clockContainer">
<div id="titleContainer">
<p id="title">Tokyo</p>
<p id="tokyo" class='clock'></p>
</div>
<div id="titleContainer">
<p id="title">Paris</p>
<p id="paris" class='clock'></p>
</div>
<div id="titleContainer">
<p id="title">Moscow</p>
<p id="moscow" class='clock'></p>
</div>
</div>
</div>
</body>
</html>
<script>
let clock = document.getElementById('clock');
function currentTime() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
let session = 'AM';
if(hours == 0){
hours = 12
}
if (hours > 12){
hours = hours - 12
session = 'PM'
}
minutes = (minutes < 10) ? "0" + minutes : minutes;
seconds = (seconds < 10) ? "0" + seconds : seconds;
let time = hours + ':' + minutes + ' ' + session;
document.getElementById('clock').innerText = time;
let york = (hours + 3) + ':' + minutes + ' ' + session;
document.getElementById('york').innerText = york;
let hawaii = (hours - 2) + ':' + minutes + ' ' + session;
document.getElementById('hawaii').innerText = hawaii;
let dubai = (hours + 12) + ':' + minutes + ' ' + session;
document.getElementById('dubai').innerText = dubai;
document.getElementById('seconds').innerText = ':' + seconds;
let london = (hours + 8) + ':' + minutes + ' ' + session;
document.getElementById('london').innerText = london;
let moscow = (hours + 12) + ':' + minutes + ' ' + session;
document.getElementById('moscow').innerText = moscow;
let paris = (hours + 9) + ':' + minutes + ' ' + session;
document.getElementById('paris').innerText = paris;
let tokyo = (hours + 17) + ':' + minutes + ' ' + session;
document.getElementById('tokyo').innerText = tokyo;
let t = setTimeout(function(){ currentTime() }, 1000);
}
currentTime();
</script>