使用按鈕點擊事件動態修改變量數據

本文旨在幫助開發者理解如何通過按鈕點擊事件來動態修改JavaScript 變量中的數據。文章將詳細講解如何正確地綁定事件、獲取按鈕ID，以及如何使用條件判斷語句來更新變量值。同時，文章還會強調一些常見的錯誤，例如變量聲明方式和比較運算符的使用，並提供經過修正的代碼示例，確保讀者能夠正確地實現所需功能。

在前端開發中，經常需要根據用戶的交互行為來動態地更新頁面上的數據。其中，通過按鈕點擊事件來修改變量的值是一種常見的需求。下面將詳細介紹如何實現這一功能，並避免一些常見的錯誤。

HTML 結構

首先，我們需要定義一組按鈕，每個按鈕對應一個特定的數據集。這些按鈕將觸發JavaScript 函數來更新變量。

 <div class="row" style="margin:auto; padding: 8px 8px 0" id="categories">
  <button id="eqty" class="btn btn-primary" style="'margin:" onclick="clicked()">Equity Chart</button>
  <button id="debt" class="btn btn-primary" style="'margin:" onclick="clicked()">Debt Chart</button>
  <button id="hyb" class="btn btn-primary" style="'margin:" onclick="clicked()">Hybrid Chart</button>
</div>

這段代碼創建了三個按鈕，分別具有eqty、debt 和hyb 的ID。每個按鈕的onclick 屬性都綁定了clicked() 函數，當按鈕被點擊時，該函數將被執行。

JavaScript 代碼

接下來，我們需要編寫JavaScript 代碼來處理按鈕點擊事件，並更新變量的值。

 <script>
    let chartdata = [];
    const eqdata = [[&#39;a&#39;,2],[&#39;b&#39;,6],[&#39;r&#39;,9],[&#39;s&#39;,8]];
    const debdata = [[&#39;p&#39;,2],[&#39;r&#39;,6],[&#39;r&#39;,9],[&#39;d&#39;,8]];
    const hybdata = [[&#39;l&#39;,2],[&#39;k&#39;,6],[&#39;rr&#39;,9],[&#39;df&#39;,8]];

    function clicked(){
        const id = event.srcElement.id
        if (id == &#39;eqty&#39;){
            chartdata = eqdata;
        } else if (id == "debt"){
            chartdata = debdata;
        } else if (id == "hyb"){
            chartdata = hybdata;
        }
    };
</script>

這段代碼首先聲明了幾個變量：

• chartdata：用於存儲當前數據集的變量，使用let 聲明，因為它的值會改變。
• eqdata、debdata 和hybdata：分別存儲不同的數據集，使用const 聲明，因為它們的值不會改變。

然後，定義了clicked() 函數，該函數執行以下操作：

1. 獲取按鈕ID：使用event.srcElement.id 獲取觸發事件的按鈕的ID。
2. 條件判斷：使用if...else if... 語句根據按鈕ID 來判斷應該將哪個數據集賦值給chartdata。注意，這裡使用== (或===) 進行比較，而不是=，= 是賦值運算符。

注意事項

• 變量聲明：推薦使用let 和const 來聲明變量，而不是var。 let 和const 具有塊級作用域，可以避免一些潛在的問題。
• 比較運算符：在條件判斷語句中，務必使用== (或===) 進行比較，而不是=。 = 是賦值運算符，會導致邏輯錯誤。 == 只比較值，=== 不僅比較值，還比較數據類型。
• 代碼位置：將JavaScript 代碼放在

以上是使用按鈕點擊事件動態修改變量數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！