Question

我正在使用HTML和Javascript开发税收计算器。它需要接受两个用户输入（“欠款总额”和“您的付款”），并计算“您的付款”占“欠款总额”的百分比。然后，它们应显示在“ answerParagraph”标签内。最好的方法是什么？

<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
<body>
<div id="getPercentage">
  <div id="total">
    Total owed:
    <input id="totalInput" type="text">
  </div>
  <div id="payment">
    Your payment:
    <input id="paymentInput" type="text">
  </div>
  <button onclick="handlers.getPercentage()">Get percentage</button>
</div>
  <div>
    <p id="answerParagraph">
    </p>
  </div>

<script>
var taxes = {
  getPercentage: function(total, payment) {
   var percentage = (Math.floor((payment / total) * 100));
   },
  }

var handlers = {
  getPercentage: function() {
    var totalInput = document.getElementById('totalInput');
    var paymentInput = document.getElementById('paymentInput');
    var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
  }
}
</script>
</body>
</html>

Answer 1

您必须从tax.getPercentage函数返回答案

getPercentage: function (total, payment) {
            var percentage = (Math.floor((payment / total) * 100));
            return percentage;
        }

并在您的答案段落中显示。因此，在handlers.getPercentage中：

...    
var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
                answerParagraph.innerHTML = answer;

Answer 2

以下修改后的代码应该起作用

var taxes = {
  getPercentage: function(total, payment) {
    var percentage = (Math.floor((payment / total) * 100));
    return percentage
  },
}

var handlers = {
  getPercentage: function() {
    var totalInput = document.getElementById('totalInput');
    var paymentInput = document.getElementById('paymentInput');
    var answer = taxes.getPercentage(totalInput.value, paymentInput.value);
    document.getElementById('answerParagraph').innerHTML = answer
  }
}

<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <div id="getPercentage">
    <div id="total">
      Total owed:
      <input id="totalInput" type="text">
    </div>
    <div id="payment">
      Your payment:
      <input id="paymentInput" type="text">
    </div>
    <button onclick="handlers.getPercentage()">Get percentage</button>
  </div>
  <div>
    <p id="answerParagraph">
    </p>
  </div>

  <script>
  </script>
</body>

</html>

Answer 3

如果在两个输入字段之一上通过calcpercentage()事件触发了keyup功能，则可以省去该按钮：

// define shorthand notation byId(id):
const byId=id=>document.getElementById(id);

// delegated event binding: affects INPUT elements only
byId('getPercentage').addEventListener('keyup',function(ev){
 if(ev.target.tagName!='INPUT') return false;
     byId('answerParagraph').innerHTML=
    (byId('paymentInput').value*100 /
     byId('totalInput').value).toFixed(2)+"%";
});

// trigger event manually ...
byId('totalInput').dispatchEvent(new Event('keyup',{bubbles:true}));

<html>

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <div id="getPercentage">
    <div id="total">
      Total owed:
      <input id="totalInput" type="text" value="1000">
    </div>
    <div id="payment">
      Your payment:
      <input id="paymentInput" type="text" value="25">
    </div>
  </div>
  <div>
    <p id="answerParagraph">
    </p>
  </div>

  <script>
  </script>
</body>

</html>

如何接受用户输入作为函数的参数？

3 个答案: