使用HTML和Javascript添加/减去操作

Question

我正在尝试创建一个简单的HTML加/减表，该表的值不会大于10或小于0。我已经设置了两个函数additionalAdd和additionalSub都使用{ {1}}给他们打电话。但是我不断收到错误消息，说onclick未定义。这是我用来存储总值的变量。

totalAddtions

function additionalSub() {

  var totalAdditions = document.getElementById("additionalExpenses").innerHTML;

  if (totalAddtions > 0) {
    totalAdditions--;
    document.getElementById("additionalExpenses").innerHTML = totalAdditions;
  }

}

function additionalAdd() {

  var totalAdditions = document.getElementById("additionalExpenses").innerHTML;

  if (totalAddtions < 10) {
    totalAdditions++;
    document.getElementById("additionalExpenses").innerHTML = totalAdditions;
  }

}

.btn {
  font-size: 30px;
  width: 50%;
  cursor: pointer;
}

.value {
  font-size: 30px;
  text-align: center;
}

Answer 1

if块中有错字

 var totalAdditions = document.getElementById("additionalExpenses").innerHTML;

  if (totalAddtions > 0) 

Answer 2

您使用的totalAddtions拼写错误。并在函数外部而不是内部定义它。

 var totalAddtions=0;
function additionalSub() {
 totalAddtions = document.getElementById("additionalExpenses").innerHTML;

  if (totalAddtions > 0) {
    totalAddtions--;
    document.getElementById("additionalExpenses").innerHTML = totalAddtions;
  }
 

}

function additionalAdd() {

  totalAddtions = document.getElementById("additionalExpenses").innerHTML;

  if (totalAddtions < 10) {
    totalAddtions++;
    document.getElementById("additionalExpenses").innerHTML = totalAddtions;
  }

}

.btn {
  font-size: 30px;
  width: 50%;
  cursor: pointer;
}

.value {
  font-size: 30px;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-lg-12">
  <div class="table-responsive">
    <table class="table table-bordered table-hover table-striped">
      <thead>
        <tr>
          <th colspan="2">Additional Expenses</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2" class="value" id="additionalExpenses">0</td>
        </tr>
        <tr>
          <td class="btn" onclick="additionalSub()">
            <center>-</center>
          </td>
          <td class="btn" onclick="additionalAdd()">
            <center>+</center>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>