CODEWITHSUNDEEP
javascripthtml
Dave Tops
Dave Tops

Reputation: 3

Add / Subtract operations using HTML and Javascript

I'm trying to create a simple HTML Add/Subtract table where the value doesn't go above 10 or below 0. I've setup two functions additionalAdd & additionalSub both setup using onclick to call them. But I keep getting the error saying totalAddtions not defined. Which is the variable I'm using to store the overall value.

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;
}
<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>

Upvotes: 0

Views: 215

Answers (2)

aarjithn
aarjithn

Reputation: 1181

You have a typo in the if block

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

  if (totalAddtions > 0)

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

You are using spelling of totalAddtions wrong. And define it outside the function not inside it.

 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>

Upvotes: 1

Related Questions