具有不同值的多个按钮和一个点击计数器答案

【问题标题】：Multiple buttons with different values and a click counter具有不同值的多个按钮和一个点击计数器
【发布时间】：2018-03-20 12:58:17
【问题描述】：

我目前有一个项目正在进行，我想知道如何制作一个随着点击而增加的计数器。所有按钮都有不同的值（例如 2），一旦单击，计数器就会增加。我目前已经设置了所有按钮，但我不确定如何为它们增加价值并根据按钮的价值进行计数器增加。我还想知道如何将该值存储在网络缓存中。如果有人可以提供帮助，我将非常感激。这是我当前的代码。

    body{
    	background-color: #162428;
    }
    .button {
        background-color: #4CAF50; 
        color: white;
        padding: 32px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 60px;
        margin: 200px 100px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        width: 250;
        height: 200;
    }
    .click1 {border-radius: 8px}
    .click1 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click1:hover {
        background-color: #070d0f;
        color: white;
    }
    .click2 {border-radius: 8px}
    .click2 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click2:hover {
        background-color: #070d0f;
        color: white;
    }
    
    .click3 {border-radius: 8px}
    .click3 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click3:hover {
        background-color: #070d0f;
        color: white;
    }
    .click5 {border-radius: 8px}
    .click5 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click5:hover {
        background-color: #070d0f;
        color: white;
    }
    .click10 {border-radius: 8px}
    .click10 {
        background-color: grey; 
        color: #070d0f; 
        border: 2px solid #070d0f;
    }
    
    .click10:hover {
        background-color: #070d0f;
        color: white;
    }
    
        footer {
        color: grey;
        font-size: 65px;
    }

    <html>
      <title>Button of Magnificance</title>
      <body>
        <center>
          <button class="button click1">+1</button>
          <button class="button click2">+2</button>
          <button class="button click2">+3</button>
          <button class="button click5">+5</button>
          <button class="button click10">+10</button>
        </center>
      </body>
    </html>

感谢您的帮助！

【问题讨论】：

您好，考虑使用Web Storage API 来保存附加到 JavaScript 中每个按钮的值。

标签： javascript html database

【解决方案1】：

这是一段代码，可以制作您想要的东西。我评论了 JS 部分，以便您理解它，但如果您还有问题，请不要犹豫。

<html>
<title>Button of Magnificance</title>
<body>
<style>
body{
    background-color: #162428;
}
.button {
    background-color: #4CAF50; 
    color: white;
    padding: 32px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 60px;
    margin: 100px 100px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    width: 250;
    height: 200;
}
.click1 {border-radius: 8px}
.click1 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click1:hover {
    background-color: #070d0f;
    color: white;
}
.click2 {border-radius: 8px}
.click2 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click2:hover {
    background-color: #070d0f;
    color: white;
}

.click3 {border-radius: 8px}
.click3 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click3:hover {
    background-color: #070d0f;
    color: white;
}
.click5 {border-radius: 8px}
.click5 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click5:hover {
    background-color: #070d0f;
    color: white;
}
.click10 {border-radius: 8px}
.click10 {
    background-color: grey; 
    color: #070d0f; 
    border: 2px solid #070d0f;
}

.click10:hover {
    background-color: #070d0f;
    color: white;
}
</style>
<center>
<button class="button click1" data-value="1">+1</button>
<button class="button click2" data-value="2">+2</button>
<button class="button click2" data-value="3">+3</button>
<button class="button click5" data-value="5">+5</button>
<button class="button click10" data-value="10">+10</button>
<h1 style="color: #FFF;">
    count : <span class="count">0</span>
</h1>
</center>

<!-- Import JQuery -->
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script type="text/javascript">
    // start script when DOM is ready
    $(document).ready(function(){
        // initialize a counter to 0
        var count = 0;
        // do something when an element with "button" class is clicked
        $('.button').on('click', function(){
            // get the button value
            var value = $(this).data('value');
            // update the count with new value
            count += value;
            // print the new value count on the element with "count" class
            $('.count').html(count);
        });
    });
</script>

</body>
<style>
footer {
    color: grey;
    font-size: 65px;
}
</style>
</html>

【讨论】：

谢谢！这就像一个魅力。我只需要添加网络存储，但除此之外，非常感谢！
Kevinniel，你知道如何添加网络存储吗？特别是本地存储？
是的，但你到底需要什么？现在你有了一个基础，你应该不难检查localStorage.setItem() 和localStorage.getItem() 函数；p
我应该在哪里设置这些代码，它会在所有当前代码下的新脚本中，在它们之前，还是在其中一个中？
可以在同一个脚本区制作。在我不同的代码行之间。你到底想存储什么？只有计数值？

【解决方案2】：

你可以这样写一个JS

var count=0;
function updateValue(val){
    count = count + val;
}

并且在你创建的每个按钮中，你可以添加一个onclick来调用这个函数，如下：

<button class="button click1" onclick="updateValue(1)">+1</button>
<button class="button click2" onclick="updateValue(2)">+2</button>

要将值存储在缓存中，您可以使用 localStorage。你可以在这里阅读它们： https://www.w3schools.com/html/html5_webstorage.asp

【讨论】：

【解决方案3】：

注意事项

此答案使用ES6 syntax。在继续之前，一定要对这个感到舒服。

说明

你可以通过在你的按钮上使用一个类来识别必须是递增按钮的按钮来实现你想要的。

使用getElementsByClassName() 将帮助您仅检索与您在 HTML 中提供的类匹配的按钮。

然后，您需要遍历您的按钮。我使用较新的扩展运算符将您的HTMLCollection 转换为Array。然后可以使用forEach方法为每个按钮操作一组指令（设置HTML内容并添加监听器）。

使用Web Storage API 和一些应用程序逻辑将确保数据不会重新加载页面。

代码

HTML：

<button class='button-counter'></button>
<button class='button-counter'></button>
<button class='button-counter' data-count='5'></button>

Javascript：

'use strict';

// all the .button-counter from the DOM
const buttonsCounter = document.getElementsByClassName('button-counter');

// sets the content of the button to what value is currently set for data-counter
const buttonCounterSetText = button => button.innerHTML = `Click me (${button.dataset.count || 0})`;

// handles click event on the button
const buttonCounterClickHandler = ({currentTarget}) => {
  // increases the current value for data-count, or sets it to 0
  currentTarget.dataset.count = (parseInt(currentTarget.dataset.count) || 0) + 1;
  // see above
  buttonCounterSetText(event.currentTarget);
}; 

// initialize the buttons content and add listeners for click events
const buttonCounterInitialization = button => {
  buttonCounterSetText(button);
  button.addEventListener('click', buttonCounterClickHandler);
};

// initialize all buttons found with class .button-counter
[...buttonsCounter].forEach(buttonCounterInitialization);

演示

Codepen.

【讨论】：