Question

我想从用户那里获得输入，例如乘以1.3并立即输出到窗口，就像用户类型函数正在执行并立即在HTML中显示一样。它是怎么做到的？

这是我的代码

＆＃13;

 function calc() {

      amount = document.getElementById("amount").value;
        num2 = 1.3;    
 document.getElementById("result").innerHTML = amount * num2; 
            return result;
}

＆＃13;

  <input id='amount', type="text" >
        <button onclick="calc()"> Buy Now! </button>
        <p> Result is: <br>
      <span id = "result">  </span>

＆＃13;

Answer 1

<input type="text"onkeyup="calc()">

Answer 2

首先，我建议更正您的HTML：

关于那个逗号的内容是什么？属性不需要任何分隔符。

<input id='amount', type="text" >

只需放一个空格：

<input id='amount' type="text" >

我还删除了无用的空格，这里是一个干净的HTML：

<input id='amount' type="text">
<button onclick="calc()">Buy Now!</button>
<p>Result is:<br>
<span id="result"></span>

然后，让我们开始查看您的选项，并排除那些对<input>的文字更改事件不利的选项：

keydown事件因为在value更改之前被调用而无法工作。
keypress因为同样的事件而无法工作。
keyup事件，也提出@Dmitri Usanov，会起作用，但是当密钥发布时会调用它，因此不是完美的。
input事件将起作用，它是目前最好的解决方案，但它仅适用于HTML5。

所以，让我们构建代码（你可以看到这个fiddle）：

function calc() {
  //Here I make the text a Number to then calculate it.
  let amount = Number(document.getElementById("amount").value);
  let num2 = 1.3;
  //Here I declare a precision to avoid strange errors such as 3.900000009
  let precision = 2;
  //Here I run the calculation and I apply that precision to the result.
  let multiplier = Math.pow(10, precision);
  let result = Math.round(amount * num2 * multiplier) / multiplier;
  //Finally I set the text to the span.
  document.getElementById("result").innerHTML = result; 
  return result;
}

window.addEventListener("load", function() {
  document.getElementById("amount").addEventListener("input", function() {
    calc(this.value);
  });
});

Answer 3

试试这个

＆＃13;

function calc(isEsc) {
  const num2 = 1.3;
  let result = document.getElementById("result"),
    amount = document.getElementById("amount");
  if (isEsc) {
    result.innerHTML = 0;
    amount.value = '';
  } else {
    result.innerHTML = amount.value * num2;
  }
}
document.onkeyup = function(evt) {
  evt = evt || window.event;
  var isEscape = false;
  if ("key" in evt) {
    isEscape = (evt.key == "Escape" || evt.key == "Esc");
  } else {
    isEscape = (evt.keyCode == 27);
  }
  calc(isEscape);
};

＆＃13;

<input type="text" id="amount" />
<span id="result">0</span>

＆＃13;

JS即时输出到HTML

3 个答案: