JavaScript 不显示

Question

我是 JavaScript 新手。我创建了这个调用 JS 函数的 html 表单。该函数应该进行简单的计算并使用innerHTML 将总值返回到HTML，但由于某种原因它不起作用。 有人可以帮忙找出问题所在吗？谢谢!

<form id="inputInfo" name="inputInfo">

    <span> Insert a value </span><br/>
    <input type="number" id="value"> <br/>
    <button id="send" type="submit" class="button" onclick="calculate()">  <span> Send </span></button>

    <!--output from javascript-->
    <p id="output1"> </p>
    <p id="output2"> </p>
    <p id="output3"> </p>

</form>

  //** Function below is into a .js file **//

function calculate() {

var value = document.getElementById("value");
var commission;
var finalValue;
var message;

if(value <= 0){
    commission = 0;
    finalValue = 0;
    message = "* Value is wrong! *";

} else {
    commission = value < 250 ? 25 : (value * 0.1);
    finalValue = value + commission;
    message = "";

    }

document.getElementById("output1").value.innerHTML = finalValue;
document.getElementById("output2").value.innerHTML = commission;
document.getElementById("output3").innerHTML = message;
}

Answer 1

行 var value = document.getElementById("value");，您仅访问输入的 DOM。您需要执行 .value 才能实际获取输入的“值”:

var value = document.getElementById("value").value;

对于输出部分:

document.getElementById("output1").value.innerHTML = FinalValue; document.getElementById("output2").value.innerHTML =commission; document.getElementById("output3").innerHTML = message;

删除 .value 并仅使用 .innerHTML。

与上面一样，您使用 document.getElementById("output1") 访问 DIM，并设置 innerHTML 值。

完整代码示例:https://jsfiddle.net/u87a7e6b/

<form id="inputInfo" name="inputInfo">

  <span> Insert a value </span>
  <br/>
  <input type="number" id="value">
  <br/>
  <button id="send" type="button" class="button" onclick="calculate()"> <span> Send </span></button>

  <!--output from javascript-->
  <p id="output1"> </p>
  <p id="output2"> </p>
  <p id="output3"> </p>

</form>

<script>
function calculate() {
  var value = document.getElementById("value").value;
  var commission;
  var finalValue;
  var message;

  if (value <= 0) {
    commission = 0;
    finalValue = 0;
    message = "* Value is wrong! *";

  } else {
    commission = value < 250 ? 25 : (value * 0.1);
    finalValue = value + commission;
    message = "";
  }

  document.getElementById("output1").innerHTML = finalValue;
  document.getElementById("output2").innerHTML = commission;
  document.getElementById("output3").innerHTML = message;
}
</script>