添加和删 除的一类基于输入的在JavaScript的值（无jquery的）的元件

Question

我想+和-按钮和一个输入。输入需要开始为零。当我点击+，需要多少由3增加，而当我点击-，需要数减少1。

• 如果输入的值是负的，我想打印与红色值
• 如果值是> 10我想打印与红色值
• 如果值是> 15，我想用蓝色打印值。

这里是我的尝试：

<div id="input_div">
<input type="text" size="25" value="1" id="count">
<input type="button" value="-" id="moins" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
</div>

--------------------------------------------------------
var count = 1;
var countEl = document.getElementById("count");
function plus(){
    count++;
    countEl.value = count;
}
function minus(){
  if (count > 1) {
    count--;
    countEl.value = count;
  }  
}

我的代码中的问题：1，从1开始（我想从0开始），当我按下2.加他加3（例如：1次点击加值为4），然后如果我点击再加上他只添加一（1点击加值为2）

Answer 1

您可以添加功能，这样的添加和删除基于该count值类：

（点击“运行代码片断”来测试一下）

var count = 0;
var countEl = document.getElementById("count");

function plus() {
  count += 3;
  countEl.value = count;
  calculateColor()
}

function minus() {
  count--;
  countEl.value = count;
  calculateColor()
}

function calculateColor() {
  removeClass(countEl, "red")
  removeClass(countEl, "blue")

  if (count < 0)
    addClass(countEl, "red");
  else if (count > 10 && count <= 15)
    addClass(countEl, "red")
  else if (count > 15)
    addClass(countEl, "blue")
}

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

.red {
  background-color: red
}

.blue {
  background-color: blue
}

<div id="input_div">
  <input type="text" size="25" value="0" id="count">
  <input type="button" value="-" id="moins" onclick="minus()">
  <input type="button" value="+" id="plus" onclick="plus()">
</div>

Answer 2

更改初始数量为0，改变count++到count += 3是这样的：

var count = 0;
var countEl = document.getElementById("count");
function plus(){
    count += 3;
    countEl.value = count;
}
function minus(){
  if (count > 1) {
    count--;
    countEl.value = count;
  }  
}

改变你的输入元素0太像这样的价值属性：

<input type="text" size="25" value="0" id="count">

Answer 3

你需要把价值0在HTML

<input type="text" size="25" value="1" id="count">
                                   ^^^ change it to zero

你也需要改变count = 0和'数+ = 3'

var count = 0;
var countEl = document.getElementById("count");
function plus(){
    count+=3;
    countEl.value = count;
}
function minus(){
  if (count > 1) {
    count--;
    countEl.value = count;
  }  
}

<div id="input_div">
<input type="text" size="25" value="0" id="count">
<input type="button" value="-" id="moins" onclick="minus()">
<input type="button" value="+" id="plus" onclick="plus()">
</div>