如何將“多次點擊計數器”Javascript 功能簡化為一個 Javascript function？

Question

我有多個按鈕和多個 JS 函數，它們為不同的按鈕顯示不同的計數器。 如何將我的多個 JS 函數簡化/壓縮為一個 function 將每個按鈕連接到其計數器？

這是兩個按鈕、兩個計數器和兩個 JS 函數的可行示例。 你能告訴我如何簡化/濃縮它嗎？ 非常感謝。

兩個 JAVASCRIPT 功能和樣式

<!-- JS and Style in head -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>

function clickCounter1() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount1) {
      localStorage.clickcount1 = Number(localStorage.clickcount1)+1;
    } else {
      localStorage.clickcount1 = 1;
    }
    document.getElementById("result1").innerHTML = "You have clicked the button " + localStorage.clickcount1 + " time(s).";
  } else {
    document.getElementById("result1").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
<script>
function clickCounter2() {
  if (typeof(Storage) !== "undefined") {
    if (localStorage.clickcount2) {
      localStorage.clickcount2 = Number(localStorage.clickcount2)+1;
    } else {
      localStorage.clickcount2 = 1;
    }
    document.getElementById("result2").innerHTML = "You have clicked the button " + localStorage.clickcount2 + " time(s).";
  } else {
    document.getElementById("result2").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
<style>
.button {
  border: none;
  color: white;
  padding: 1px 3px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<!-- End of Head -->

兩個 HTML 按鈕：

<p><button class="button button1" onclick="clickCounter1()" type="button" background-color="black" color="white">Click it - Button1 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button></p>
<div id="result1"></div>

<p><button class="button Button2" onclick="clickCounter2()" type="button" background-color="black" color="white">Click it - button2 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button></p>
<div id="result2"></div>

<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>

Answer 1

我已將clickCounter function 簡化為一個。

此處更改Storage object 的相關屬性取決於buttons節點列表的索引。

<p>
    <button class="button button1" type="button" background-color="black" color="white">Click
        it - Button1 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button>
</p>
<div class="result"></div>

<p>
    <button class="button Button2" type="button" background-color="black" color="white">Click
        it - button2 <i class="glyphicon glyphicon-thumbs-up" style="font-size:14px;color:white;"></i></button>
</p>
<div class="result"></div>

const buttons = document.querySelectorAll('.button');
const results = document.querySelectorAll('.result');

function clickCounter(button, index) {
    const property = "clickcount" + index + 1;
    if (typeof (Storage) !== "undefined") {
        if (localStorage[property]) {
            console.log(localStorage)
            localStorage[property] = Number(localStorage[property]) + 1;
        } else {
            localStorage[property] = 1;
        }
        results[index].innerHTML = "You have clicked the button " + localStorage[property] + " time(s).";
    } else {
        results[index].innerHTML = "Sorry, your browser does not support web storage...";
    }
}

buttons.forEach((button, index) => {
    button.addEventListener('click', function () {
        clickCounter(button, index)
    })
})

Answer 2

試圖保持你的代碼結構，所以我使用function parameter和 localStorage 方法getItem, setItem

// html

<p>
      <button
        class="button button1"
        onclick="clickCounter(1)"
        type="button"
        background-color="black"
        color="white"
      >
        Click it - Button1
        <i
          class="glyphicon glyphicon-thumbs-up"
          style="font-size: 14px; color: white;"
        >
        </i>
      </button>
    </p>
    <div id="result1"></div>

    <p>
      <button
        class="button Button2"
        onclick="clickCounter(2)"
        type="button"
        background-color="black"
        color="white"
      >
        Click it - button2
        <i
          class="glyphicon glyphicon-thumbs-up"
          style="font-size: 14px; color: white;"
        >
        </i>
      </button>
    </p>
    <div id="result2"></div>

    <p>Click the button to see the counter increase.</p>
    <p>
      Close the browser tab (or window), and try again, and the counter will
      continue to count (is not reset).
    </p>

// JS

function clickCounter(num) {
  let counterIndex = `clickcount${num}`;
  console.log(counterIndex, localStorage);
  if (typeof Storage !== "undefined") {
    if (localStorage.getItem(`clickcount${num}`)) {
      localStorage.setItem(
        `clickcount${num}`,
        Number(localStorage.getItem(`clickcount${num}`)) + 1
      );
    } else {
      localStorage.setItem(`clickcount${num}`, 1);
    }
    document.getElementById(`result${num}`).innerHTML =
      "You have clicked the button " +
      localStorage.getItem(`clickcount${num}`) +
      " time(s).";
  } else {
    document.getElementById(`result${num}`).innerHTML =
      "Sorry, your browser does not support web storage...";
  }
}

如何將“多次點擊計數器”Javascript 功能簡化為一個 Javascript function？

問題描述

2 個解決方案

解決方案1
0 2020-05-17 04:38:55

解決方案2
0 2020-05-17 04:53:34

如何將“多次點擊計數器”Javascript 功能簡化為一個 Javascript function？

問題描述

2 個解決方案

解決方案1 0 2020-05-17 04:38:55

解決方案2 0 2020-05-17 04:53:34

解決方案1
0 2020-05-17 04:38:55

解決方案2
0 2020-05-17 04:53:34