Determining the Price Tag of User Frustration

I am looking to create a calculator that can determine the financial cost of experiencing anger.

While I may not be the best at articulating the issue, I will do my utmost to explain it. Users are required to input their age, salary, hours worked per day, frequency of work-related anger incidents, and duration of each angry episode.

I have an Excel formula prepared (for those skilled enough to understand) along with some code that I have been working on. You can access the Excel file and code through this link: __

To better grasp the concept, you may need to refer to the Excel file (I apologize for any confusion caused by my poor English skills).

I also have HTML and JavaScript code snippets that I attempted to write; however, I had to remove certain parts to comply with Stack Overflow requirements.

Thank you all for your help and support.

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>

JavaScript 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

Everything seems to be functioning correctly; the only thing missing was an event handler on your button. I took the liberty of adding one inline (onClick="calcAnger()"). There are multiple ways to accomplish this, but I opted for the quickest solution given the brevity of the code snippet you provided.

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>

Answer №2

If you wish to modify some elements in your HTML code for better functionality, consider utilizing the FORM tag. By following the method below, you can incorporate validations in your form prior to submission. I can provide further information on this if needed.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for modifying the language of an Angular Application's OneTrust Cookie Banner

I'm currently developing an Angular application and utilizing OneTrust for managing cookie consent. The issue I'm encountering is that while the rest of the components on the login page are properly translated into the target language, the OneTru ...

iOS Facebook SDK Login

I'm facing an issue with logging in to my website using the Facebook JS API on my iPhone. The login process works smoothly on a computer and iPad, but I encounter a problem on my iPhone. When attempting to log in on my iPhone, I am directed to a scre ...

How can one read a file line by line and conduct analyses using node.js?

Currently, I am facing an issue where I have a file that needs to be read line by line for expensive analytics and saving results to the database. The code snippet looks like this: const fs = require('fs'); const path = require('path') ...

as you lower a div element, the background image will also be shifted

While working on a rails project, I mastered all the rails elements easily. Surprisingly, I encountered an issue with CSS this time - something that is not usual for me as I usually face Ruby problems! The problem arises when trying to move a div element ...

Exploring through angular.js with the use of identifiers

In my data, I have two JSON objects: all_users "all_users": { "4":{ "user_id":4, "user_name":"Miranda" }, "7":{ "user_id":7, "user_name":"seconduser" } And tickets "tickets": [{ "ticket_id" : 12, "created_by" : ...

Is there a way to pre-load images from component B within component A using Vue?

In a scenario where I have two Vue files, A.vue and B.vue, the issue arises when navigating from A to B. B contains numerous images fetched from Firebase realtime database, resulting in slow loading times upon first visit. To address this, I aim to preload ...

Adjust the width of a DIV based on the width of its text content in CSS

Not long ago, I stumbled upon this fantastic example demonstrating how to incorporate material design elements in buttons. These buttons are created using a combination of classes that allow for easy customization with just a simple modification. However, ...

Utilizing jQuery to style and remove styles from a clicked radio button by leveraging parent() and next() methods

In my project, I have 3 identical sections that are exactly the same as each other. What I want to achieve is a functionality where when I click on the ".rad1" (first radio button), its label gets styled. Similarly, when I click on ".rad2", it should remov ...

Below is a compilation of items found within the JavaScript object that include the data from the previous list

I am currently experiencing an issue where the values in the list of objects within some object only contain values from the last object. My goal is to assign scores to locations based on various criteria (which are stored in a separate list). To simplify ...

What is the best way to utilize price data from one table to perform a calculation that is located in a separate table?

As I continue my journey in learning PHP/MySQL, I have been fortunate to gain valuable knowledge from the talented individuals on StackOverflow. Currently, I am embarking on the creation of a room reservations system that involves working with two tables: ...

What is the best way to dynamically retrieve the field name from a JSON object using JavaScript?

Upon retrieving data from an API, I am interested in obtaining more detailed information from each field within the object, such as Name, Number, Select, and so forth. An issue that arises is that the field names can be altered on the server side; meaning ...

The sizing of cards in Bootstrap is not uniform

I'm currently working on a page layout using Bootstrap. I've included 3 cards in a row, but they are not displaying at equal sizes for some reason. The content within the cards, including headings and images, seems to be affecting their overall s ...

Using the novalidate attribute in Angular 4.0.0

Since migrating to angular 4, I have encountered a peculiar issue with my template-driven form. The required attribute on the input field appears to be malfunctioning. It seems like the form has the novalidate attribute by default, preventing HTML5 validat ...

Having trouble selecting a box with Selenium Webdriver in Python

When using Selenium Webdriver with Python, I am facing an issue clicking on the box that contains the text "24h". Here is my code snippet: from selenium import webdriver from PIL import Image from selenium.webdriver.chrome.service import Service import ti ...

What is the best way to display data from multiple lists that are returned by a JSON function?

List of My Models: ClassAllocate: Contains Id, DepartmentId, CourseId, RoomId, DayId, StartTime, EndTime Course: Consists of Id, CourseCode, CourseName, DepartmentId Room: Includes Id, RoomNumber Day: Has Id and DayName My goal is to search for course ...

Utilizing moment.js to showcase the current time of day

Is there a way to show "Sunday Morning" if it's before noon or "Sunday Afternoon" if it's after noon? This code snippet below is what I am currently using to retrieve the current day: var now = moment().format("dddd"); $("#date").append(now); & ...

Webpack: Live reloading is not functioning properly, however the changes are still successfully compiling

Could someone help me understand why my React application, set up with Webpack hot reload, is not functioning properly? Below is the content of my webpack.config.js: const path = require('path'); module.exports = { mode: 'development&apo ...

The Jquery slider panel seems to be stuck open even after I switched its CSS orientation from right to left

I am following up on a previous question, which can be found here. After fixing the jQuery code, I decided to change the panel slider to open from the left side instead of the right. I modified the class from "cd-panel from-right" to "cd-panel from-left". ...

A function with capabilities akin to Promise.some/any, designed to handle an unspecified number of promises

In my node.js (V8.1.3) script, I am analyzing similar JSON data from various APIs to compare stock market prices of different cryptocurrencies. Currently, I am utilizing promise.all to wait for responses from multiple APIs. let fetchedJSON = awai ...

The element is implicitly defined as of 'any' type because a type of 'string' expression cannot be used to index an empty type

Having trouble with TypeScript here. It seems that I can't access accountProps using account in this map function export type AccountTypes = "TB1" | "GBB" | "MS1" | \"28D\" | "RS1"; type Acc ...