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

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.

javascripthtmlcssvariablestype-conversion


Solution 1:[1]

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

Solution 2:[2]

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>

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Razin
Solution 2 Hishan_98
Solution 3

Related Questions