JavaScript Print input innerHTML returns undefined?

Question

I looked through other answers and questions and I just cannot find a solution. I'm trying to make a simple fraction calculator for debugging and testing my JavaScript skills (since I've been doing nothing but Python and re-sharpening skills) and I seem to have run into an issue. It's simple, a user puts in a number in an <input class="num_11" onkeypress="return isNumberKey(event)">, and for a <input class="den_11" onkeypress="return isNumberKey(event)">, then once more to complete 2 fractions. Then there is 4 buttons; <button class="multiply" id="multiply">*</button>, <button class="divide" id="divide">/</button>, <button class="add" id="add">+</button>, and <button class="subtract" id="subtract">-</button>. I also have a <button id="debug">debug</button>. When it is clicked, an document.getElementById("*button*").addEventListener("click", function() { debug() })} function is fired, and should console.log(document.getElementById("*button*").innerHTML), but I get undefined.

In Short

Why is it returning undefined, and how can I print the current value in an <input> field?

My Code

HTML

<div id="wrap">
  <div id="fraction_calc">
    <div class="container">
      <button id="debug">debug</button>
      <div class="fraction_row1">
        <input class="num_11" onkeypress="return isNumberKey(event)">
        <input class="num_12" onkeypress="return isNumberKey(event)">
      </div>
      <button class="multiply" id="multiply">*</button>
      <button class="divide">/</button>
      <button class="add">+</button>
      <button class="subtract">-</button>
      <div class="fraction_row2">
        <input class="den_11" onkeypress="isNumberKey(event)">
        <input class="den_12" onkeypress="isNumberKey(event)">
        <br>
      </div>
      <input class="num_2" onkeypress="return isNumberKey(event)" readonly>
      <br>
      <input class="den_2" onkeypress="isNumberKey(event)">
    </div>
  </div>
</div>

CSS

html,
body {
  background: #96C9FF
}

#wrap {
  background: #96C9FF;
  margin-top: 100px;
}

#fraction_calc {
  background: #6BB3FF;
  text-align: center;
  margin: auto;
  height: 360px;
  width: 750px;
}

.container {
  background: #2E93FF;
  border-radius: 10px;
  min-width: 625px;
  min-height: 225px;
  padding-top: 25px;
  margin: auto;
  margin-top: 50px;
  display: inline-block;
}

.num_11 {
  width: 50px;
  background: #000000;
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.num_12 {
  width: 50px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
}

.num_2 {
  width: 50px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
}

.den_11 {
  width: 50px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
}

.den_12 {
  width: 50px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
}

.den_2 {
  width: 50px;
  background: #000000;
  color: #FFFFFF;
  text-align: center;
}

JavaScript

///just makes the input only accept numbers

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}

/*function calc() {
  document.getElementById("multiply").addEventListener("click", function() {
    var multiply = document.getElementsByClassName("multiply");
    var divide = document.getElementsByClassName("divide");
    var add = document.getElementsByClassName("add");
    var subtract = document.getElementsByClassName("subtract");
    var num_11 = document.getElementsByClassName("num_11");
    var num_12 = document.getElementsByClassName("num_12");
    var num_ans = document.getElementsByClassName("num_2");
    var den_11 = document.getElementsByClassName("den_11");
    var den_12 = document.getElementsByClassName("den_12");
    var den_ans = document.getElementsByClassName("den_2");
    if (num_11 == "" || num_12 == "" || den_11 == "" || den_12 == "") {
      alert("One of the fields are empty! Please fill in all fraction fields.");
    } else {
      var num_11x = num_11.innerHTML;
      var num_12x = num_12.innerHTML;
      var den_11x = den_11.innerHTML;
      var den_12x = den_12.innerHTML;
      var fracOne = num_11x / den_11x;
      var fracTwo = num_12x / den_12x;
      console.log(fracOne);
      console.log(fracTwo);
    }
  })
} */
///the important part
function debug() {
 var num_1 = document.getElementsByClassName("num_11"); console.log(num_1.value)
}
document.getElementById("debug").addEventListener("click", function() {
  debug()
})

Answer 1

It is quite simple, once you have the Element just read the value directly;

var val = element.value;

I would propose you use document.getElementById(String) though, and convert all of your classes to ID's, since they are unique anyway.

The alternative would be to use nodeList.item(0).value from a returned getElementsByClassName instance.

EDIT: A tip for the future, you should always include a JsFiddle as well as the source code. It makes stuff easier on the people answering your question.