javascript - 按钮 onclick 中的值不会增加

Question

我为 onclick 增量输入值编写了这个函数。为什么这不起作用？控制台返回 0 个错误，因为我不知道那有什么问题。每次单击按钮 + 时，脚本应向输入添加一个 +1 值如果您能提供一个类似但正确的减量版本，我将不胜感激。

inputval = 0;

$(".plus").on("click", function() {
  inputval = $("#param8").val();
  inputval++;
});

input[type="text"] {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-family: 'open sans', sans-serif;
  padding: 10px;
  width: 460px;
  margin-bottom: 10px;
  border: 1px solid #c0c0c0;
}

.count-field {
  position: absolute;
  right: 0;
  top: 0;
  height: 39px;
  width: 40px;
  text-align: center;
  border: 0;
  color: #fff;
  background: #222;
}

.count-field:hover {
  cursor: pointer;
  transition-duration: 0.5s;
}

.count-field.plus {
  right: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.count-field.plus:hover {
  background: green;
}

.count-field.minus:hover {
  background: #cd3d3d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative; width: 500px;">
  <input type="text" placeholder="Text field amount" value="" id="param8" name="param8" />
  <button type="button" class="count-field plus">+</button>
  <button type="button" class="count-field minus">-</button>
</div>

Answer 1

使用这段代码:

您需要修改您的 JavaScript 代码，请参阅此处:

inputval = 0;															
$(".plus").on("click", function() {
   inputval = $("#param8").val();
   inputval++;	
   $("#param8").val(inputval);																						 
});

$(".minus").on("click", function() {
   inputval = $("#param8").val();
   inputval--;
   //set min value to 0
   if(inputval <= 0){
      inputval = 0;
   }
   $("#param8").val(inputval);																						 
});

input[type="text"] {
display: block;
border: 0;
margin: 0;
padding: 0;
font-size: 15px;
font-family: 'open sans',sans-serif;
padding: 10px;
width: 460px;
margin-bottom: 10px;
border: 1px solid #c0c0c0;
}

.count-field {
position: absolute;
right: 0;
top: 0;
height: 39px;
width: 40px;
text-align: center;
border: 0;
color: #fff;
background: #222;
}

.count-field:hover {
  cursor: pointer;
  transition-duration: 0.5s;
}

.count-field.plus {
right: 40px;
border-right: 1px solid rgba(255,255,255,0.5);
}

.count-field.plus:hover {
background: green;
}

.count-field.minus:hover {
background: #cd3d3d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative; width: 500px;">
<input type="text" placeholder="Text field amount" value="" id="param8" name="param8" />
<button type="button" class="count-field plus">+</button>
<button type="button" class="count-field minus">-</button>
</div>