Javascript-计算和比较

Question

我正在学习JS，在实践中我无法让脚本的第二部分为我工作。

我有3个输入（#ancho - #fondo - #alto），在这里我写一个整数，表示它们之间的相乘，然后相除。 此部分工作正常

现在是问题：

在第二部分中，我想比较值“ r =”是否大于或小于输入#peso中写入的数字（通过用户），但对我不起作用。

我在这里做错了什么？

请参见JSFiddle中的DEMO

提前感谢！

---

HTML：

<input id="ancho"> <!-- Example value="22" -->
<input id="fondo"> <!-- Example value="20" -->
<input id="alto"> <!-- Example value="16" -->

<input id="peso"> <!-- Example value="3" -->

<div id="resultado"></div>

<div id="hacercalculo" onclick="calcular();comparar()">Calcular</div>

<!--css display none-->

<div id="uno">1</div>
<div id="dos">2</div>
<div id="tres">3</div>

jQuery：

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js

脚本：

// Calculate - This part works fine

function calcular(){
  v1 = document.getElementById("ancho").value;
  v2 = document.getElementById("fondo").value;
  v3 = document.getElementById("alto").value;

  r = v1*v2*v3/4000;

  //document.getElementById("resultado").value = r;
  document.getElementById("resultado").innerHTML = r;
};

//=============

// Compare - This, It does not work for me

function comparar() {

    var camp1= document.getElementById("resultado");
    var camp2= document.getElementById("peso");

    //if (camp1.value >= 0 && camp2.value <= 3) {
    //if (camp1.innerText >= 0 && camp2.innerText <= 3) {
    //if (camp1.innerHTML >= 0 && camp2.value <= 3) {

      if (camp1.innerText >= 0 && camp2.value <= 3) {

        $("#uno").show(); // This, It does not work for me
    }
};

Answer 1

只是对您的comparar（）函数中的“ if语句”进行的小修改。

textContent必须转换为数字。

if (Number(camp1.textContent) >= 0 && camp2.value <= 3) {

    $("#uno").show();
}

更改后请参考此密码笔示例，https://codepen.io/SathishVel/pen/KKVMvqj

Answer 2

如果r大于或小于peso，则r != peso。以下comparar功能应处理第二部分。

function comparar() {
    var camp1= document.getElementById("resultado").innerHTML;
    var camp2= document.getElementById("peso").value;

    if (Number(camp1) != Number(camp2)) {
        $("#uno").show(); // condition met hence #uno rendered.
    }
};

Answer 3

您的代码存在一些问题，因此为什么我不工作首先，您应该使用textContent获取值var camp1= document.getElementById("resultado").textContent;秒，您两次检索值

 var camp2= document.getElementById("peso").value;
if (camp1 >= 0 && camp2.value <= 3) 

应为(camp1 >= 0 && camp2 <= 3)

最终使您的代码正常工作，如果if语句必须返回一个值

 if (camp1.innerText >= 0 && camp2.value <= 3) {
   return  console.log('..show one') // use the return keyword to return value 
}

尝试一下

function comparar() {

      var camp1= document.getElementById("resultado").textContent;

      console.log(camp1)
      var camp2= document.getElementById("peso").value;
      console.log(camp2)

      if (camp1 >= 0 && camp2 <= 3) {
       $("#uno").show();
      }
  }
  </script>

Answer 4

根据您所说的内容，您需要检查值是否在一定范围内，并且还要检查它是否具有小数位，因此我将创建两个函数来进行这两项检查。

检查值是否在一定范围内的功能：

function interval(a, b, c) {
  return ((b - a) * (b - c) <= 0)
}

使用示例：

interval(2, 5, 6) // true (2 < 5 < 6)
interval(2, 1, 6) // false (2 < 1 < 6), false because 2 < 1 is false
interval(2, 7, 6) // false (2 < 7 < 6), false because 7 < 6 is false

字体：Check if a value is within a range of numbers积分Alexander

检查数字是否有小数位的功能：

function isDecimal(a) {
  if(Number(a) == Math.floor(a)) {
    return false
  } else {
    return true
  }
}

使用示例：

isDecimal(2) // false
isDecimal(2.2) // true

Note：在算法中，您正在使用以下变量：

var camp1= document.getElementById("resultado");
var camp2= document.getElementById("peso");

它们是字符串格式，因此在这些功能中使用它们之前，您需要将它们转换为数字，因此在它们下面可以：

camp1 = Number(camp1)
camp2 = Number(camp2)