Javascript，div点击输入字段中的多个数字答案

【问题标题】：Javascript, div on click multiple numbers in input fieldJavascript，div点击输入字段中的多个数字
【发布时间】：2016-07-10 10:31:43
【问题描述】：

我正在尝试创建一个JavaScript 来修改我输入字段中的数字。

例子：

<input value="0">

然后是一个带有JavasSript点击功能的简单按钮或div。

<button>Add +10</button>

点击按钮后：

<input value="10">

是否有人可以阅读并学习创建此内容的地方，或任何让我入门的提示。我知道的很少JavaScript，但我很想学习。

【问题讨论】：

SO 不适合此类问题，但请查看MDN EventTarget.addEventListener() 和addEventListener vs onclick
您想要解决您的问题或寻找学习 JS 的好教程/课程的提示吗？
我想要解决方案，我只是希望了解它是如何工作的。

标签： javascript html

【解决方案1】：

试试这个或fiddleLink。

ParseInt 有助于将字符串值转换为数字并将它们添加而不是连接。如果您还有问题，请告诉我。

var tag1Elem = document.getElementById("tag1");
// The callback function to increse the value.
function clickFN() {
    tag1Elem.value = parseInt(tag1Elem.value, 10) + 10;
  }
  // Reset the value back to 0

function resetFN() {
    tag1Elem.value = 0;
  }
  // Callbacks can be attached dynamically using addEventListener
document.getElementById("btn").addEventListener("click", clickFN);

document.getElementById("reset").addEventListener("click", resetFN);

#wrapper {
  margin: 20px;
}

<p>This is a basic tag input:
  <input id="tag1" value="0" />
  <button type="button" id="btn">Add +10</button>
  <button type="button" id="reset">Reset</button>
</p>

【讨论】：

【解决方案2】：

你可以试试this

<input value="0" id="id">

给输入字段一个id

点击按钮调用函数

<button onclick="myFunction()">Add +10</button>

<script>
    function myFunction() {
        document.getElementById("id").value = parseInt(document.getElementById("id").value) +10;
    }

</script>

【讨论】：

您好，感谢您的快速回答。这似乎完成了一半的工作，再次单击时是否可以再添加 10 个。所以它达到了 20、30 等等？

【解决方案3】：

你可以使用像this这样的点击计数器

并编辑它，将+= 1 替换为+= 10。这是我的代码，

var input = document.getElementById("valor"),
    button = document.getElementById("buttonvalue");
    var clicks = 0;

button.addEventListener("click", function()
                        {
          clicks += 10;
        input.value = clicks;
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Script</title>
</head>
<body>
<input id="valor" value="0">
<button id="buttonvalue">10</button>
</body>
</html>

【讨论】：