Question

我正在尝试创建一个keyup事件处理程序，该事件处理程序将检查第一个文本框，以便在松开enter键时可以计算用户输入工作的小时数。如果用户输入的数字少于40，则输入该数字并将其乘以$ 12，但如果用户输入的数字大于40（小时），则该数字将多出的小时并乘以$ 18，然后加上$ 480（$ 12 x 40小时），并在第二个文本框中返回一个值。我相信我只是在使用错误的运算符或错误的方法来获取Enter键的输入键。预先感谢

let hours = document.getElementById("box1")
let pay = document.getElementById("box2")
document.addEventListener("keyup", press);

function press() {
  if (event.key === "Enter") {
    let a = hours.value;
    
    if hours.value <= 40;
      let b = (a * 12);
    else hours.value >= 40;
      let c = [((a - 40) * 18) + 480]

    let c = pay.value = b;
  }

<p>Enter your hours:</p> <input type="number" id="box1">
<p>Your pay will appear here:</p> <input type="text" id="box2" disabled>

Answer 1

您的JS存在一些语法问题，例如大括号不匹配，分号放在错误的位置以及没有将事件作为press()函数的参数接收。

逻辑本身可以分为两个阶段，一个阶段是计算基本收益，另一个阶段是计算40小时后的收益。还要注意，您需要警惕将无效值输入到字段中，因为尽管它是一个数字字段，但它仍将接受某些字母字符，例如e。要解决此问题，请确保在使用parseInt()之前获得任何价值。试试这个：

var hourBreak = 40;
var baseRate = 12;
var higherRateFactor = 1.5;

let hourField = document.getElementById("box1")
let payField = document.getElementById("box2")
document.addEventListener('keyup', press);

function press(e) {
  if (e.keyCode === 13) {
    var hours = parseInt(hourField.value, 10) || 0;      
    var baseEarnings = Math.min(hours, hourBreak) * baseRate;
    var higherEarnings = Math.max(hours - hourBreak, 0) * (baseRate * higherRateFactor)
    payField.value = baseEarnings + higherEarnings;
  }
}

<p>Enter your hours:</p> <input type="number" id="box1">
<p>Your pay will appear here:</p> <input type="text" id="box2" disabled>

Answer 2

您在代码中使用的公式很好。但是，您的代码有几个问题：if-else语句导致js错误；您两次定义let c也会导致错误。您还会错过新闻功能中的事件参数。在下面的代码段中，如果小时数大于40，我将简化if-else语句以更正b的值。我还删除了a变量。

let hours = document.getElementById("box1");
let pay = document.getElementById("box2");
document.addEventListener("keyup", press);

function press(event){
  
  if (event.key === "Enter") {     
    let b = (hours.value * 12);
    if (hours.value > 40) {
      b = [((hours.value-40) * 18) + 480]      
    }
    pay.value = b;
  }
}

<p>Enter your hours:</p> <input type="number" id="box1">
<p>Your pay will appear here:</p> <input type="text" id="box2" disabled>

使用KeyUp，如何在释放Enter键后获取值？

2 个答案: