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>

Answer 2

你需要添加一行：

value = parseInt(value);

否则 JavaScript 可能会将“值”视为一种字符串。

这是完整的代码

function calculate() {
  var value = document.getElementById("value").value;

  value = parseInt(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;
}

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

Answer 3

请注意，在更正 DOM 访问后，变量value 包含输入到输入元素中的文本的字符串值。需要将其转换为数字以将数字相加而不是将它们连接为字符串。一种解决方案是更换线路

    if (value <= 0) {

这两个

    value = parseFloat( value);
    if( value <= 0 || isNaN(value) {