Simplifying/Combining if statement logic (When usi

Question

I have been looking around, googling here and there, how to properly code a very simplistic calculator. More specifically a Boolean calculator with set values. If I've lost you, bear with me I'll try to explain.

I have the need to use checkboxes to set a input.value. This value will be picked up elsewhere in a Web-Java applet; hence the need for input.value.

To save time and confusion I have built a small snippet using JS Fiddle, and realised I have no real idea how to work with Numbers in JS. Everything I have learned so far has been self taught using the web and various other sources.

I struggle in understanding efficient ways of writing logic, but can scrape by, by writing really simplistic logic. The more I write and ask questons the more I learn. So I've come here seeking some advice on how to minimize my given code snippet.

---

It's not robust, It's not elegant; but it's my route in.

function calculate() {
  // set the variables
  var a = document.getElementById('checkboxopt');
  var b = document.getElementById('checkboxopt1');
  var c = document.getElementById('pnvar');
  var d = document.getElementById('adjvar');
  var e = document.getElementById('adjvar2');
  var i = 0;
  var i2 = 0;

  if (a.checked) {
    console.log('Arg True')
    i = i + 80;
    d.value = i;
  } else {
    console.log('Arg False')
    d.value = i;
  }

  if (b.checked) {
    console.log('Arg True')
    i2 = i2 + 30;
    e.value = i2
  } else {
    console.log('Arg False')
    e.value = i2;
  }
  console.log(i, i2);
  c.value = i + i2;
};

var cbs = document.querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function(cb) {
  cb.addEventListener("click", function() {
    console.log(this.id);
    calculate();
  });
});

calculate();

.editoropt {
  font-family: Calibri, sans-serif;
  width: 160px;
  background: #f8f8ff;
  padding: .5em;
  border: solid 1px #ddd;
}
#checkboxopt {
  float: left;
  margin-right: 1em;
  margin-top: 4px;
}
#checkboxopt1 {
  float: left;
  margin-right: 1em;
  margin-top: 4px;
}
.pnvar {
  width: 95%;
}
input:-moz-read-only {
  /* For Firefox */
  background-color: transparent;
  border: none;
  border-width: 0px;
}
input:read-only {
  background-color: transparent;
  border: none;
  border-width: 0px;
}

<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Default 80mm </span>
    <input type="checkbox" name="checkboxopt" id="checkboxopt" value="true" checked />
    <input type="hidden" name="opt1" id="opt1" value="true" />
  </label>
</div>
<div class="seq-box-form-field  editoropt  ">
  <label for="opt1"><span style="padding-right: 10px; vertical-align: 1px;">Add 30mm </span>
    <input type="checkbox" name="checkboxopt1" id="checkboxopt1" value="true" />
    <input type="hidden" name="opt2" id="opt2" value="true" />
  </label>
</div>
<div class="editoropt">
  <input class="pnvar" id="pnvar" name="pnvar" placeholder="Null" onkeydown="if (event.keyCode == 13) { event.preventDefault(); return false; }" value="" class="required" type="text">
  <input name="adjvar" class="pnvar" id="adjvar" readonly value="0">
  <input name="adjvar" class="pnvar" id="adjvar2" readonly value="0">
</div>
</div>

---

My Question

What would be the best way to simplify my given code, and improve it's performance. More Specifically, is there a more simplistic way of working with numbers within JS? Or am I on the right track with my current snippet?

If you are an experienced JS developer how would you tackle the desired result above?

A little detailed guidance is what I'm hoping for.

Answer 1

First, try to make code as reusable as possible. So,

if (a.checked) {
  console.log('Arg True')
  i = i + 80;
  d.value = i;
} else {
  console.log('Arg False')
  d.value = i;
}

if (b.checked) {
  console.log('Arg True')
  i2 = i2 + 30;
  e.value = i2
} else {
  console.log('Arg False')
  e.value = i2;
}

can be replaced as

function dummy(el, val) {
  i2 += el.checked ? val : 0;
}

Second, do not have inline functions in HTML. It will dirty your HTML and make debug difficult. You should wrap all listeners in a wrapper function. This will enable you to even export all of them to separate file and you will know where to look.

Third, instead of hard coding value 80 or 30 in your code, make a map or bind it to element using data-attribute

Fourth and more Important one, use better variable names. a-e or i, i1, i2 are bad names. Only you will understand your code (till you are in context). Always use precise meaningful name. This will help in long run. I have even kept function names as long as 30+ chars just to define its purpose.

Also try to break your code in smaller functions. This will increase scope for reusing them.

You can refer updated code and ask any queries, if you have.

Hope it helps!