Trying to take input from HTML and do computation with it in Javascript

Question

I’m trying to get the computer to take an input from the HTML and add and multiply some number to it in Javascript. I’m from python and the variable system in Javascript makes no sense to me, so can someone please lmk what to do?

        <div class = "text">How much energy do you use?</div>
        <input id = "q1" type = "text" placeholder = "# of KilaWatts"></input>
        <button type="button" onclick="getInputValue();">Submit</button>
        <!-- Multiply InputValue by 3 and Add 2 —->

I tried to do something with parseInt, and parseString, but it didn’t work as it would just not run.

Please show your code that is not working. What does function "getInputValue()" do? — Yogi, Apr 03 '22 at 09:52
Check this answer as the question seems to be the same: https://stackoverflow.com/questions/28695617/how-to-get-a-number-value-from-an-input-field — fbzyx, Apr 03 '22 at 10:07
Here is the JS Function that I tried: function getInputValue(){ // Selecting the input element and get its value let inputVal = document.getElementById("q1").value; // string inputVal = parseInt(inputVal.val()); inputVal += 3; inputVal *= 3; let inputVal = parseString(inputVal.val()); // Displaying the value alert(inputVal); — RinUnderscore, Apr 03 '22 at 10:08
Please put the code in the question, it's almost unreadable in a comment. Maybe [this post](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) helps you to better understand JS variable system. — Teemu, Apr 03 '22 at 10:10

score 0 · Answer 1 · answered Apr 03 '22 at 10:12

It's not that hard. try to play with the below code. Cheers!!

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

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

    <!-- Always link or write your js Scripts before closing the <body> tag -->
    <script>
        function Multiply() {
            let value = document.getElementById("insertValue").value; //get the inserted  Value from <input> text box
            let answer = 0;

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

            //Display answer in the <p> tag and it id ="answer"
            document.getElementById("answer").innerText = "Your Answer is: "+ answer;

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

Nitin Kumar · Answer 2 · 2022-04-03T10:23:04.103

Easy (to understand) Solution:

<div class="text">How much energy do you use?</div>
<input id="q1" type="text" placeholder="# of KilaWatts"></input>
<button type="button" onclick="getInputValue();">Submit</button>
<br>
<output id="a1"></output>

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

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

score 0 · Accepted Answer · answered Apr 03 '22 at 12:04

try this, first query input value then calculate your desire numbers then alert the user, like this <!-- Multiply InputValue by 3 and Add 2 —->

function getInputValue() {
  const inputVal = document.getElementById("q1").value; //query input value
  const calculatedValue = ((inputVal *3) +2);   // first multiply input value with 3
                                                // then add 2
 alert(calculatedValue);  // show the calculated value through an alert
};

Trying to take input from HTML and do computation with it in Javascript

3 Answers3