Question

我正在尝试使用小费计算器创建一个简单的表单。我无法让“addEventListener”工作。我很困惑如何将tip和bill变量添加到代码中。我的所有文件都正确链接。这是我的代码：

    function calc() {
        var bill = Number(document.getElementById('bill').value);
        var tip = bill * .20;
        var total_bill = bill + tip;

        document.getElementById("myBtn").addEventListener("click", function(){
        	document.getElementById("demo").innerHTML= "$"+Number(total_bill).toFixed(2);    

    });
      }

<div id="wrapper">
        <header>
            <h1>Tip Calculator</h1>
        </header>
        <form action="javascript:void(calc())">
            Amount: $<input id="bill" type="text">
            <br>
            <button id="myBtn">Find Tip</button>
    
            <p id="demo"></p>
            </form>
        </div>

Answer 1

您不需要addEventListener。试试这个工作得很好。希望它有所帮助：）

function calc() {
    var bill = Number(document.getElementById('bill').value);
    var tip = bill * .20;
    var total_bill = bill + tip;
    document.getElementById("demo").innerHTML= "$"+Number(total_bill).toFixed(2);    
};

<form>
  Amount: $<input id="bill" type="text">
  <button type="button" id="myBtn">Find Tip</button>
  <p id="demo"></p>
</form>

Answer 2

您可以使用onclick事件代替addEventListener

    document.getElementById('myBtn').onclick = function(){
      var bill = Number(document.getElementById('bill').value);
      var tip = bill * .20;
      var total_bill = bill + tip;
      document.getElementById("demo").innerHTML= "$"+Number(total_bill).toFixed(2);  
    }

    <form>
        Amount: $<input id="bill" type="text">
        <button type="button" id="myBtn">Find Tip</button>
        <p id="demo"></p>
    </form>

OR

    function ID(ID){
      return document.getElementById(ID);
    }

    ID('myBtn').onclick = function(){
      var bill = Number(ID('bill').value);
      var tip = bill * .20;
      var total_bill = bill + tip;
      ID("demo").innerHTML= "$"+Number(total_bill).toFixed(2);  
    }

        <form>
            Amount: $<input id="bill" type="text">
            <button type="button" id="myBtn">Find Tip</button>
            <p id="demo"></p>
        </form>

Answer 3

尝试使用以下代码段，而不使用addEventListener

function calc() {
    var bill = Number(document.getElementById('bill').value);
    var tip = bill * .20;
    var total_bill = bill + tip;
    //removed addEventListener, as here it is not need
    document.getElementById("demo").innerHTML = "$" + Number(total_bill).toFixed(2);
} //added

<div id="wrapper">
  <header>
    <h1>Tip Calculator</h1>
  </header>
  <!-- changes: removed `action`, added onsubmit -->
  <form onsubmit="calc();return false">
    Amount: $
    <input id="bill" type="text">
    <br>
    <button id="myBtn">Find Tip</button>
    <p id="demo"></p>
  </form>
</div>

这个使用addEventListener：

document.getElementById("myBtn").addEventListener("click", function() {
  var bill = Number(document.getElementById('bill').value);
  var tip = bill * .20;
  var total_bill = bill + tip;
  document.getElementById("demo").innerHTML = "$" + Number(total_bill).toFixed(2);
});

<div id="wrapper">
  <header>
    <h1>Tip Calculator</h1>
  </header>
  <!-- changes: removed `action`-->
  <form>
    Amount: $
    <input id="bill" type="text">
    <br>
    <button id="myBtn">Find Tip</button>
    <p id="demo"></p>
  </form>
</div>

提示计算器（addEventListener）

3 个答案: