如何在純js和HTML中進行onclick-有解無憂

我正在做一個小專案——為多個時區構建數字時鐘——這個想法是有幾個不同的時區時鐘和一個下拉選單，有更多國家可供選擇，時鐘應該從選擇中更新。我有一個按鈕，在按鈕中我有一個 id、一個“onclick”和一個類。

目前我在js中為所有靜態時鐘提供了這個：

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;
}

并嘗試在下面添加此內容，以便在選擇一個國家/地區時更新時鐘：

 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; 
//     })

我的 HTML 按鈕：

<div class="dropdown">
  <div class="countriesList">
    <button id="countriesDropdown" onclick="getTime" class="dropdown_button">Select a Country</button>
    <ul>
      <li><a href="#">Andorra</a></li>
      <li><a href="#">Dubai</a></li>
      <li><a href="#">Kabul</a></li>
      <li><a href="#">Tirane</a></li>
      <li><a href="#">Yerevan</a></li>
      <li><a href="#">Casey</a></li>
      <li><a href="#">Davis</a></li>
      <li><a href="#">Dumont Durville</a></li>
      <li><a href="#">Mawson</a></li>
      <li><a href="#">Palmer</a></li>
      <li><a href="#">Rothera</a></li>
      <li><a href="#">Syowa</a></li>
      <li><a href="#">Troll</a></li>
      <li><a href="#">Vostok</a></li>
      <li><a href="#">Buenos_Aires</a></li>
      <li><a href="#">Cordoba</a></li>
      <li><a href="#">Salta</a></li>
      <li><a href="#">Jujuy</a></li>
    </ul>
  </div>
</div>

<div id="selectedClock"> 00:00:00</div>

uj5u.com熱心網友回復：

你想要一個國家的下拉串列，所以你應該使用選擇標簽來做。
在標簽中添加 onclick 屬性不是最佳做法，因此請改用 javascript。

function getTime(countryTimezone) {
    const chosenTime = new Date().toLocaleTimeString("en-US", {timeZone: countryTimezone});
    document.getElementById('selectedClock').innerHTML = chosenTime;
}

document.querySelector('div.countriesList > select').addEventListener('change', function(){
  getTime(this.value);
});

<div class="countriesList">
  <select>
    <option value="Europe/Andorra">Andorra</option>
    <option value="Asia/Dubai">Dubai</option>
    <option value="Asia/Kabul">Kabul</option>
    <option value="Europe/Tirane">Tirane</option>
  </select>
</div>
<div id="selectedClock"> 00:00:00</div>

時區參考：https ://en.wikipedia.org/wiki/List_of_tz_database_time_zones

希望能幫助到你。

uj5u.com熱心網友回復：

I think you can use select tag and when select is changing works your function

uj5u.com熱心網友回復：

您應該改用 select

改變這個

<ul>
    <li><a href="#">Andorra</a></li>
    <li><a href="#">Dubai</a></li>
    <li><a href="#">Kabul</a></li>
    ...

至

<select id="countriesDropdown" class="dropdown_button">
    <option value="Andorra"></option>
    <option value="Dubai"></option>
    ...   
</select>

在 javascipt 中

 button = document.getElementById("countriesDropdown");
 button.addEventListener("change",getTime);

不要像以前那樣添加函式的其余部分。只是函式名沒問題。

而在 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";
...

uj5u.com熱心網友回復：

獲取您感興趣的元素，element然后將事件偵聽器添加到該元素：
element.addEventListener('click', func);
該函式接受事件的引數并且通常是行內的：
element.addEventListener('click', function(e) { ... });

此示例將單擊偵聽器添加到按鈕，它只是切換類“打開”，因此單擊添加打開，再次單擊洗掉打開，打開和關閉串列（顯示和隱藏），并在選擇某些內容時再次隱藏串列。

每個命名國家的串列項也會獲得一個事件偵聽器以獲取所選國家。我只是把它寫到控制臺；你會更新你的時鐘。

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}`);
        })
    });

.countriesList ul {
    display: none;
}
.countriesList ul.open {
    display: block;
}

<div class="dropdown">
  <div class="countriesList">
    <button id="countriesDropdown" class="dropdown_button">Select a Country</button>
    <ul>
      <li><a href="#">Andorra</a></li>
      <li><a href="#">Dubai</a></li>
      <li><a href="#">Kabul</a></li>
      <li><a href="#">Tirane</a></li>
      <li><a href="#">Yerevan</a></li>
      <li><a href="#">Casey</a></li>
      <li><a href="#">Davis</a></li>
      <li><a href="#">Dumont Durville</a></li>
      <li><a href="#">Mawson</a></li>
      <li><a href="#">Palmer</a></li>
      <li><a href="#">Rothera</a></li>
      <li><a href="#">Syowa</a></li>
      <li><a href="#">Troll</a></li>
      <li><a href="#">Vostok</a></li>
      <li><a href="#">Buenos_Aires</a></li>
      <li><a href="#">Cordoba</a></li>
      <li><a href="#">Salta</a></li>
      <li><a href="#">Jujuy</a></li>
    </ul>
  </div>
</div>

<div id="selectedClock">00:00:00</div>

正如其他人提到的，我會使用帶有選項的選擇：

<select id="countriesDropdown">
    <option value="andorra">Andorra</option>
     etc.
</select>

uj5u.com熱心網友回復：

您可以使用 document.querySelectorAll 來捕獲所有 href，并將事件偵聽器附加到每個 href，如下所示。

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;
}

<div class="dropdown">
  <div class="countriesList">
    <button id="countriesDropdown" class="dropdown_button">Select a Country</button>
    <ul>
      <li><a href="#">Andorra</a></li>
      <li><a href="#">Dubai</a></li>
      <li><a href="#">Kabul</a></li>
    </ul>
  </div>
</div>

<div id="selectedClock"> 00:00:00</div>

上面的代碼將為每個鏈接附加一個偵聽器，當單擊國家名稱時，它應該使用 id - selectedClock 更改 div 標簽中的時間。

但這會引發錯誤，因為 toLocaleDateString 方法將選項之一作為 TimeZone ，但您提供的選項無效（國家名稱）。所以你應該為它提供一個有效的時區。時區參考：https
://en.wikipedia.org/wiki/List_of_tz_database_time_zones 就像其他人建議的那樣，您應該使用 select 以便您可以指定國家/地區的時區作為其值。

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);

<div class="dropdown">
  <div class="countriesList">
    <select id="countriesDropdown">
      <option value="IST">India</option>
      <option value="JST">Japan</option>
    </select>
  </div>
</div>

<div id="selectedClock"> 00:00:00</div>

上面的代碼應該適合你。當您從下拉串列中選擇一個國家/地區時，它將觸發附加到下拉串列的更改事件偵聽器，并將更改您的 div 標簽中的時間和時間，其中 id - selectedClock。

希望這可以幫助。

uj5u.com熱心網友回復：

當你定義 onclick 函式時，你需要放括號。在你的getTime函式中，你想傳遞引數，但你什么也沒傳遞。

<button id="countriesDropdown" onclick="getTime('time zone here', 'element name here');" class="dropdown_button" >Select a Country</button>

您提供的此代碼有語法錯誤：

document.getElementById("countriesDropdown");
 button.addEventListener("click",function(countryTimezone, elementName) {
                                                                      ^
// Expected ')' but instead got '{'

您使用addEventListener但從未關閉它，而是以函式的括號結束它。一個“點擊”事件監聽器被呼叫并被傳遞一個引數——觸發監聽器的事件。將function(countryTimezone, elementName)獲取引數中的事件，countryTimezone并且elementName引數將未定義

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519384.html

標籤：javascripthtml

上一篇：PHP提交表單正在破壞我的會話

下一篇：網頁抓取Yougov