尝试从 HTML 获取输入并在 Javascript 中使用它进行计算

Question

我正在尝试让计算机从 HTML 中获取输入，并在 Javascript 中对其添加和乘以一些数字。我来自 python，Javascript 中的变量系统对我来说毫无意义，所以有人可以问我该怎么做吗？

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

我尝试用 parseInt 和 parseString 做一些事情，但没有成功，因为它不会运行。

Answer 1

没那么难。尝试使用以下代码。干杯！！

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

Answer 2

简单（易于理解）解决方案：

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

Answer 3

试试这个，首先查询输入值然后计算你想要的数字然后提醒用户，像这样 <!-- 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
};

尝试从 HTML 获取输入并在 Javascript 中使用它进行计算

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

html

javascript

css

variables

type-conversion