JavaScript打印输入innerHTML返回undefined？

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>，但我未定义。

简而言之

为什么返回未定义，如何在<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> 字段中打印当前值？

我的代码

HTML

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

CSS

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()
})

的JavaScript

///只使输入只接受数字

{{1}}

Answer 1

这很简单，一旦你让Element直接读取了值;

var val = element.value;

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

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

编辑：未来的提示，您应该始终包含JsFiddle以及源代码。它使人们更容易回答你的问题。