如何计算用户愤怒的成本

时间:2018-06-06 02:02:08

标签: javascript html5 css3

我想建立一个计算器来计算愤怒的成本。

我真的不知道如何解释,但我会尽力解释这个问题,所以我希望用户把每天的工资时间,工作时间有多少,以及需要多长时间它会持续下去吗。

我在excel文件中有公式(如果你已经足够好,你会理解)和我尝试制作的一些代码。 这是Excel文件和代码__

的链接

您可能需要查看excel文件以了解我的意思(我很抱歉,我无法向您解释清楚,因为我的英语很差,我真的很抱歉。) https://drive.google.com/open ...

我还有我试图写的Html和Java脚本代码; (我需要删除一些代码才能让stack over flow让我显示代码) 非常感谢你们

HTML

<div class="login">
<form method="post">
    <p> Enter your age </p>
        <input id="user_age" type="text" name="a" value="0" required="required" />
    <p>Enter your salary or income ($) </p>
        <input id="user_salary" type="text" name="b" value="0" required="required" />
    <p> Enter Work hours per day </p>
        <input id="user_work" type="text" name="x" value="0" required="required" />
    <p> How often do you get angry per day during work.</p>
        <input id="user_time" type="text" name="c" value="0" required="required" />
    <p> How many hours does the average anger last? </p>
        <input id="user_anger" type="text" name="d" value="0" required="required" />        
    <p id="results"></p>

    <input type="button" class="button" value="Calculate">
</form>

Java Scipt代码

function calcAnger () {
var sixty = 60;
var age = parseFloat(document.getElementById('user_age').value);
var salary = parseFloat(document.getElementById('user_salary').value);
var workTime = parseFloat(document.getElementById('user_work').value);    
var angerDay = parseFloat(document.getElementById('user_time').value);
var angerLast = parseFloat(document.getElementById('user_anger').value);
var calculate = "Your cost of anger: $" + ' ' + age * salary* 243 * workTime * angerDay * angerLast * 2;

document.getElementById ('results').innerHTML = calculate;
return false;
calculate.style.color = "#ff0000";

2 个答案:

答案 0 :(得分:0)

似乎工作正常;你只是错过了按钮上的事件处理程序。我添加了一个内联(onClick="calcAnger()")。有几种方法可以添加,但我根据您提供的小代码示例给出了快速选项。

&#13;
&#13;
function calcAnger() {
  var age = parseFloat(document.getElementById('user_age').value);
  var salary = parseFloat(document.getElementById('user_salary').value);
  var workTime = parseFloat(document.getElementById('user_work').value);
  var angerDay = parseFloat(document.getElementById('user_time').value);
  var angerLast = parseFloat(document.getElementById('user_anger').value);
  var calculate = "Your cost of anger: $" + ' ' + age * salary * 243 * workTime * angerDay * angerLast * 2;

  document.getElementById('results').innerHTML = calculate;
}
&#13;
<div class="login">
  <form method="post">
    <p> Enter your age </p>
    <input id="user_age" type="text" name="a" value="0" required="required" />
    <p>Enter your salary or income ($) </p>
    <input id="user_salary" type="text" name="b" value="0" required="required" />
    <p> Enter Work hours per day </p>
    <input id="user_work" type="text" name="x" value="0" required="required" />
    <p> How often do you get angry per day during work.</p>
    <input id="user_time" type="text" name="c" value="0" required="required" />
    <p> How many hours does the average anger last? </p>
    <input id="user_anger" type="text" name="d" value="0" required="required" />
    <p id="results"></p>

    <input type="button" class="button" value="Calculate" onClick="calcAnger()">
  </form>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以简单地更改HTML代码中的某些语义并利用FORM标记。使用以下方法,您可以在提交前在表单中应用验证。如果你愿意,会让你知道这些细节。

  <script>
      function calcAnger() {
        var age = parseFloat(document.getElementById("loginForm").a.value);
          var salary = parseFloat(document.getElementById("loginForm").b.value);
          var workTime = parseFloat(document.getElementById("loginForm").x.value);
          var angerDay = parseFloat(document.getElementById("loginForm").c.value);
          var angerLast = parseFloat(document.getElementById("loginForm").d.value);
          var calculate = "Your cost of anger: $" + ' ' + age * salary * 243 * workTime * angerDay * angerLast * 2;

          document.getElementById('results').innerHTML = calculate;
        }
    </script>   
<div class="login" >
    <form method="post" onSubmit="calcAnger()" id="loginForm">
        <p> Enter your age </p>
            <input id="user_age" type="text" name="a" value="0" required="required" />
        <p>Enter your salary or income ($) </p>
            <input id="user_salary" type="text" name="b" value="0" required="required" />
        <p> Enter Work hours per day </p>
            <input id="user_work" type="text" name="x" value="0" required="required" />
        <p> How often do you get angry per day during work.</p>
            <input id="user_time" type="text" name="c" value="0" required="required" />
        <p> How many hours does the average anger last? </p>
            <input id="user_anger" type="text" name="d" value="0" required="required" />        
        <p id="results"></p>

        <input type="submit" class="button" value="Calculate">
    </form>
    </div>