Как рассчитать стоимость пользовательского гнева

Question

Я хочу построить калькулятор для расчета стоимости гнева.

Я не знаю, как объяснить, но я сделаю все возможное, чтобы объяснить эту проблему, поэтому я хочу, чтобы пользователь указывал время зарплаты по возрасту в день работы, сколько раз он гневается на работе,и как долго это длится.

У меня есть формула в файле Excel (если вы достаточно хороши, вы поймете) и некоторый код, который я пытаюсь сделать.Вот ссылка на файл Excel и код __

Возможно, вам понадобится проверить файл Excel, чтобы понять, что я имею в виду (мне очень жаль, что я не могу объяснить вам ясно, потому что мой английский действительно плохой, ямне очень жаль.) https://drive.google.com/open…

У меня также есть код Html и Java-сценария, который я пытался написать;(Мне нужно удалить некоторый код, чтобы позволить стеку течь, позвольте мне показать код) Большое спасибо, ребята

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 code

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";

Answer 1

Вы можете просто изменить некоторую семантику в своем 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>

Answer 2

Кажется, работает нормально;Вы просто пропустили обработчик событий на своей кнопке.Я добавил один встроенный (onClick="calcAnger()").Есть несколько способов добавить это, но я просто дал быстрый вариант, основанный на небольшом приведенном вами примере кода.

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;
}

<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>