Add / Subtract operations using HTML and Javascript

Question

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>

that is just a typing error you use totalAddtions instead of totalAdditions — robinvrd
– robinvrd, Commented Feb 6, 2019 at 16:36
Just to clarify HereticMonkeys comment @DaveTops javascript is NOT the same thing as Java. Java is a completely different language that runs on top of a virtual machine. JavaSCRIPT is the language of the web. — Marie
– Marie, Commented Feb 6, 2019 at 16:40

ellipsis · Accepted Answer · 2019-02-06 16:38:29Z

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>

aarjithn · Accepted Answer · 2019-02-06 16:51:31Z

1

You have a typo in the if block

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

  if (totalAddtions > 0)

edited Feb 6, 2019 at 16:51

user2399035

answered Feb 6, 2019 at 16:36

aarjithn

1,19110 silver badges20 bronze badges

Collectives™ on Stack Overflow

Add / Subtract operations using HTML and Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related