如何使用简单的 JavaScript 代码计算百分比

Question

我已经在 html 中创建了一个表单并将其与我的样式 sheet 和 JavaScript 页面链接。我的问题是在表单上显示结果。

有人可以看一下 JavaScript 代码并告诉我我做错了什么吗？

查看代码片段了解更多详情

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
 myForm.oninput = percentageCalculator;

function percentageCalculator(amount, percent) {       
    return ((percent *amount) / 100).toFixed(2)
  }
  
  myForm.result.value = percentageCalculator()

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

Answer 1

将参数作为局部作用域传递给函数，然后return返回结果。

function percentageCalculator(amount,percent) {       
  return ((percent *amount) / 100).toFixed(2)
}

myForm.result.value = percentageCalculator()

Answer 2

// Percentage Calculator
  

const calculatedResult = document.getElementById('result');

function mySubmitFunction(e) {
  e.preventDefault();
  const percent = document.getElementById('percent').value;
  const amount = document.getElementById('amount').value;
  calculatedResult.value = percentageCalculator(amount,percent);
  return false;
}

function percentageCalculator(amount,percent) {       
  return ((percent *amount) / 100).toFixed(2)
}

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" onsubmit="return mySubmitFunction(event)" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" id="percent" name="percent" step=any min=0> % of </append>
    <label><input type="number" id="amount" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output id="result" name="result" value='0'></output>

    <br><br>
    <button type="submit">Calculate!</button>
  </fieldset>
</form>

你的错误：

提交按钮而不是重置
提交后防止违约
引用元素使用 ID

Answer 3

像下面那样使用oninput。还要为金额输入字段命名。它在 OP 中丢失了。

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');

myForm.oninput = () => {
    myForm.result.value = percentageCalculator(myForm.amount.value, myForm.percent.value);
}

function percentageCalculator(amount, percent) {       
    return ((percent * amount) / 100).toFixed(2)
}

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" name="amount" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

Answer 4

如果你想在点击输入框时立即得到结果，那么让addEventListerner输入元素然后获取percentageCalculator中的值并进行相应的计算..

我没有修改你的 HTML 的任何内容，只修改了 JS 部分..

const myForm = document.getElementById('my-form');

const percent = document.querySelector('[name="percent"]');

const amount = document.querySelector('.amount');

const result = document.querySelector('[name="result"]');

function percentageCalculator() { 
  result.value = ((percent.value * amount.value) / 100).toFixed(2)
}

myForm.addEventListener('submit', e=>e.preventDefault())
myForm.addEventListener('input', percentageCalculator)
  
// myForm.result.value = percentageCalculator()

fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

如果您可以修改 HTML 模板，那么您也可以将 name 属性添加到金额输入中，然后您可以获得带有 myForm.inputName 的元素..

备选方案：https://codepen.io/Maniraj_Murugan/pen/KKpdgXo

如何使用简单的 JavaScript 代码计算百分比

How to calculate percentage with simple JavaScript code

javascript

percentage