Question

我正在编写一个函数来计算总和，产品，并查看哪个数字更大。我有总和和产品，但是当我尝试比较2个数字时，它不会起作用。我试图在点击按钮时显示所有3项（总和，产品和比较）。这是代码：

＆＃13;

<div class="container">
  <div class="main">
    <h1>Please enter two numbers</h1>
    <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p>
    <input type="button" id="btn" value="Submit" onclick="calculate()">
  </div>
  <br>
  <div id="result">
  </div>

  <!-- Function -->
  <script>
    function calculate() {
      var x = document.getElementById("num1").value;
      var y = document.getElementById("num2").value;
      var sum = parseInt(x) + parseInt(y);
      var product = parseInt(x) * parseInt(y);

      document.querySelector("#result").innerHTML = ("The sum is " +
        sum + " and the product is " + product);
    }
  </script>

  <!-- This was the if statement that won't work. I was placing this in the same function right after the 1st querySelector.

    if (x > y) {
      document.querySelector("#result").innerHTML = (x + " is greater than " + y);
    } else {
      document.querySelector("#result").innerHTML = (y + " is greater than " + x);
    }  
    -->

＆＃13;

Answer 1

我将x和y的强制转换为整数转换为变量的赋值。之后你可以将它们作为整数使用而不用担心。

＆＃13;

function calculate() {
  var x = parseInt(document.getElementById("num1").value);
  var y = parseInt(document.getElementById("num2").value);
  var sum = x + y;
  var product = x * y;

  document.querySelector("#result").innerHTML = ("The sum is " +
    sum + " and the product is " + product + ". ");

  if (x > y) {
    document.querySelector("#result").innerHTML += (x + " is greater than " + y);
    // TODO: what about x == y ?
  } else {
    document.querySelector("#result").innerHTML += (y + " is greater than " + x);
  }
}

＆＃13;

<div class="container">
  <div class="main">
    <h1>Please enter two numbers</h1>
    <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p>
    <input type="button" id="btn" value="Submit" onclick="calculate()">
  </div>
  <br>
  <div id="result">
  </div>

＆＃13;

Answer 2

不要多次解析这些数字。解析它们一次，然后使用解析后的值。

同样地，不要使用querySelector多次获取相同的元素，使用它一次并将其保存到稍后可以使用的变量中。

由于您按ID获取元素，因此最好使用getElelementByID()代替querySelector()。

＆＃13;

function calculate() {
  var x = document.getElementById("num1").value;
  var y = document.getElementById("num2").value;
  x = parseInt(x);
  y = parseInt(y);

  var sum = x + y;
  var product = x * y;
  var result = document.querySelector("#result");

  result.innerHTML = "The sum is " + sum + " and the product is " + product + "<br/>";

  if (x > y) {
    result.innerHTML += x + " is greater than " + y;
  } else {
    result.innerHTML += y + " is greater than " + x;
  }
}

＆＃13;

<div class="container">
  <div class="main">
    <h1>Please enter two numbers</h1>
    <p>First number: <input type="number" id="num1">&nbsp;&nbsp; Second number: <input type="number" id="num2"></p>
    <input type="button" id="btn" value="Submit" onclick="calculate()">
  </div>
  <br>
  <div id="result">
  </div>

＆＃13;

Answer 3

基本上你的问题是在你的代码中你会两次覆盖div元素。对于你的div元素结果：

```

 if (x > y) {
      document.querySelector("#result").innerHTML = (x + " is greater than " + y);
    } else {
      document.querySelector("#result").innerHTML = (y + " is greater than " + x);
    }

```

被立即跟随的值替换：

```

document.querySelector("#result").innerHTML = ("The sum is " +sum + " and the product is " + product);

``` 我建议您连接innerHTML值或者为它们中的任何一个创建一个单独的div元素。

希望这会对你有所帮助。

创建一个比较2个数字的函数

3 个答案: