JavaScript 打印输入innerHTML 返回未定义？

Question

我查看了其他答案和问题，但就是找不到解决方案。我正在尝试制作一个简单的分数计算器来调试和测试我的 JavaScript 技能(因为我除了 Python 和重新锐化技能之外什么也没做)，但我似乎遇到了问题。很简单，用户在 <input class="num_11" onkeypress="return isNumberKey(event)"> 中输入一个数字，对于 <input class="den_11" onkeypress="return isNumberKey(event)"> ，然后再次完成 2 个分数。然后是4个按钮； <button class="multiply" id="multiply">*</button> , <button class="divide" id="divide">/</button> , <button class="add" id="add">+</button> ，和<button class="subtract" id="subtract">-</button> 。我还有一个<button id="debug">debug</button> 。单击后，会出现 document.getElementById("*button*").addEventListener("click", function() { debug() })}函数被触发，并且应该 console.log(document.getElementById("*button*").innerHTML) ，但我没有定义。

简而言之

为什么它返回未定义，以及如何在 <input> 中打印当前值领域？

我的代码

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

///只是让输入只接受数字

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

很简单，一旦你有了元素，直接读取值即可；

var val = element.value;

我建议您使用 document.getElementById(String)，并将所有类转换为 ID，因为它们无论如何都是唯一的。

另一种方法是使用返回的 getElementsByClassName 实例中的 nodeList.item(0).value。

编辑:对 future 的提示，您应该始终包含 JsFiddle以及源代码。它使回答您问题的人变得更容易。