Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Question

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Looking for help with extracting user input from HTML and performing mathematical operations in JavaScript. Coming from a Python background, the variable system in JavaScript is confusing to me. Can someone provide guidance on how to achieve this?

<div class="text">Enter your energy usage:</div>
<input id="q1" type="text" placeholder="# of Kilowatts"></input>
<button type="button" onclick="getInputValue();">Submit</button>
<!-- Multiply InputValue by 3 and Add 2 -->

I attempted to use parseInt and parseString but encountered issues as it refused to execute.

javascript html css variables type-conversion

Answer 1

Answer №1

Here's a suggestion for you to try out: begin by querying the input value, then calculate your desired numbers and finally notify the user using an alert message, for example

<!-- InputValue multiplied by 4 and then subtracted by 1 —->

function findInputValue() {
  const inputValue = document.getElementById("q2").value; //querying input value
  const calculatedResult = ((inputValue *4) -1);   // initial step: multiply input value by 4
                                                // second step: subtract 1 from the result
 alert(calculatedResult);  // display the calculated result via an alert
};

Answer 2

Here's a suggestion for you to try out: begin by querying the input value, then calculate your desired numbers and finally notify the user using an alert message, for example

<!-- InputValue multiplied by 4 and then subtracted by 1 —->

function findInputValue() {
  const inputValue = document.getElementById("q2").value; //querying input value
  const calculatedResult = ((inputValue *4) -1);   // initial step: multiply input value by 4
                                                // second step: subtract 1 from the result
 alert(calculatedResult);  // display the calculated result via an alert
};

Answer 3

Answer №2

Give it a go and experiment with the code snippet below. Enjoy!!

<html>
<body>
    <label for="insertValue">Enter Your Value:</label>
    <input type="text" id="insertValue">

    <button onclick="Multiply()">Multiply</button> <!-- Triggering JS function on button click -->
    <p id="answer"></p>

    <!-- Remember to include your JS Scripts before closing the <body> tag -->
    <script>
        function Multiply() {
            let value = document.getElementById("insertValue").value; //retrieve input value from <input> text box
            let answer = 0;

            //Perform Multiplication
            answer = value * 2 * 3;

            //Show the result in the <p> tag with id ="answer"
            document.getElementById("answer").innerText = "Your Answer is: "+ answer;

        }
    </script>
</body>
</html>

Answer 4

Give it a go and experiment with the code snippet below. Enjoy!!

<html>
<body>
    <label for="insertValue">Enter Your Value:</label>
    <input type="text" id="insertValue">

    <button onclick="Multiply()">Multiply</button> <!-- Triggering JS function on button click -->
    <p id="answer"></p>

    <!-- Remember to include your JS Scripts before closing the <body> tag -->
    <script>
        function Multiply() {
            let value = document.getElementById("insertValue").value; //retrieve input value from <input> text box
            let answer = 0;

            //Perform Multiplication
            answer = value * 2 * 3;

            //Show the result in the <p> tag with id ="answer"
            document.getElementById("answer").innerText = "Your Answer is: "+ answer;

        }
    </script>
</body>
</html>

Answer 5

Answer №3

Simple Solution:

<div class="content">How much water do you need?</div>
<input id="q1" type="text" placeholder="# of liters"></input>
<button type="button" onclick="calculateWater();">Calculate</button>
<br>
<output id="a1"></output>

<script>
  var input = document.getElementById("q1");
  var output = document.getElementById("a1");

  function calculateWater() {
    output.textContent = (input.value * 2) + 5;
  }
</script>

Answer 6

Simple Solution:

<div class="content">How much water do you need?</div>
<input id="q1" type="text" placeholder="# of liters"></input>
<button type="button" onclick="calculateWater();">Calculate</button>
<br>
<output id="a1"></output>

<script>
  var input = document.getElementById("q1");
  var output = document.getElementById("a1");

  function calculateWater() {
    output.textContent = (input.value * 2) + 5;
  }
</script>

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

When the child content surpasses the height of the parent, you can scroll within an overflow:visible; div

The screen reader is unable to interpret the text that is visible within the anchor tag

React is struggling to dynamically update text content using button click events

The package.json file is missing the "exports" main, causing the Error [ERR_PACKAGE_PATH_NOT_EXPORTED] to be displayed

How to Keep Button Highlighted After Clicking

Angular: Design dependent on attributes

Combining Angular and Bootstrap: how to create two overlapping divs

Is it possible to trigger an ajaxcall once another one has finished executing?

Develop a map in JavaScript that uses a parent key to filter data from an object and then stores it in the map

How to import a template from a different webpage in AngularJS

Rails 6 not displaying Javascript as intended

Webpack2 now transforms sass/scss files into JavaScript rather than CSS during compilation

Issue encountered when displaying an organized list in next.js

Stop processing the current websocket connection once a new websocket request is received

Issue with JQuery Ajax form causing unexpected page refresh in Safari but not in Firefox (working properly)

Allow only specific inner divs to dictate the width of the outer div

"The website seems to be experiencing some technical difficulties on Firefox, but I have switched to

Extracting HTML element from PHP string and placing it in a different page

Leveraging Ajax and jQuery to create a POST request for adding a new record to a MySQL table within a Node.js server

Modal shows full JSON information instead of just a single item