Do not add the remainder of the function as you did previously. Just the function name is okay.
And in getTime
function getTime() {
selection = document.getElementById("countriesDropdown");
let countryTimezone = selection.value;
let chosenTime = new Date().toLocaleString("en-US", {timeZone: countryTimezone});
let selectedTime = new Date (chosenTime);
elementName = "selectedClock";
...
Solution 4 :
Get the element you’re interested in element then add the event listener to that element: element.addEventListener('click', func);
The function takes a parameter for the event and is often inlined: element.addEventListener('click', function(e) { ... });
This sample adds the click listener to the button, which just toggles the class “open” so click adds open, click again removes open, to open and close the list (show and hide), and again hides the list when something is chosen.
Each list-item naming a country also gets an event listener to get the country chosen. I’m just writing it to the console; you would update your clock.
const btn = document.getElementById('countriesDropdown');
const list = btn.querySelector('#countriesDropdown + ul');
btn?.addEventListener('click', function(event) {
list.classList.toggle('open');
});
list.querySelectorAll('li > a')
?.forEach(li => {
li.addEventListener('click', function(e) {
e.preventDefault();
const country = e.target.innerText;
list.classList.toggle('open'); // close the list again when something is chosen
console.log(`country chosen: ${country}`);
})
});
As others mention, I would have used a select with options:
<select id="countriesDropdown">
<option value="andorra">Andorra</option>
etc.
</select>
Solution 5 :
You can use the document.querySelectorAll to capture all the hrefs and attach an event listener to each href like given down below.
countries = document.querySelectorAll('li > a')
for (country of countries) {
country.addEventListener("click", getTime(country.innerText));
};
function getTime(countryTimezone) {
let chosenTime = new Date().toLocaleString("en-US", {
timeZone: countryTimezone
});
let selectedTime = new Date(chosenTime);
let hour = selectedTime.getHours();
let min = selectedTime.getMinutes();
let sec = selectedTime.getSeconds();
let timezone = hour + ":" + min + ":" + sec
document.getElementById("selectedClock").innerHTML = chosenTime;
}
The above code will attach a listener to each of those links and when a country name is clicked it should change the time in your div tag with id – selectedClock.
But this will throw an error because toLocaleDateString method takes one of the options as TimeZone but you are providing an invalid one (Country Name). So you should provide a valid timezone for it.
Time zones reference: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
Like suggested by others you should use select so that you can specify the country’s timezone as its value.
function getTime() {
countryTimezone = document.getElementById("countriesDropdown").value;
let chosenTime = new Date().toLocaleString("en-US", {
timeZone: countryTimezone
});
let selectedTime = new Date(chosenTime);
let hour = selectedTime.getHours();
let min = selectedTime.getMinutes();
let sec = selectedTime.getSeconds();
let timezone = hour + ":" + min + ":" + sec
document.getElementById("selectedClock").innerHTML = chosenTime;
}
document.getElementById("countriesDropdown").addEventListener("change", getTime);
The above code should work for you.
When you select a country from the dropdown it will trigger the change event listener attached to the dropdown and will change the time the time in your div tag with id – selectedClock.
Hope this helps.
Solution 6 :
When you define onclick functions, you need to put parentheses. In your getTime function, you want to pass in parameters, but you’re passing nothing.
<button id="countriesDropdown" onclick="getTime('time zone here', 'element name here');" class="dropdown_button" >Select a Country</button>
You used addEventListener but never closed it, instead, you ended it with the function’s parentheses. A ‘click’ event listener is called and is passed one parameter — the event that triggered the listener. The function(countryTimezone, elementName) will get the event in the countryTimezone parameter and the elementName parameter will be undefined
Problem :
I’m working on a small project – building digital clocks for multiple time zones – the idea is a have several different time zone clocks and a drop-down with more countries to choose from, and the clock should update from the selection. I have a button, in the button, I have an id, an “onclick”, and a class.
Currently, I have this in js for all the static clocks:
function getTime(countryTimezone, elementName) {
let chosenTime = new Date().toLocaleString("en-US", {timeZone: countryTimezone});
let selectedTime = new Date (chosenTime);
let hour = selectedTime.getHours();
let min = selectedTime.getMinutes();
let sec = selectedTime.getSeconds();
let timezone = hour + ":" + min + ":" + sec
document.getElementById(elementName).innerHTML = chosenTime;
}
and tried to add this below so that when a country is selected, the clock is updated:
document.getElementById("countriesDropdown");
// button.addEventListener("click",function(countryTimezone, elementName){
// let chosenTime = new Date().toLocaleString("en-US", {timeZone: countryTimezone});
// let selectedTime = new Date (chosenTime);
// let hour = selectedTime.getHours();
// let min = selectedTime.getMinutes();
// let sec = selectedTime.getSeconds();
// let timezone = hour + ":"
// + min + ":" + sec;
// })
