Javascript - Calculate and compare

Question

I'm learning JS, and in my practice I can't get the second part of my script to work for me.

I have 3 inputs (#ancho - #fondo - #alto), where I write integers number for a multiplication between them, followed by a division. This part works fine

Now the problem:

In the second part, I want to compare if the value "r =" is greater or less than the number written (por the user) in the input #peso, but it doesn't work for me.

What am I doing wrong here?

See the DEMO in JSFiddle

Thanks in advance!

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

Script:

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

'In the second part, I want to compare if the value "r =" is greater or less than the number written (por the user) in the input #peso, but it doesn't work for me.' — Aks Jacoves, Jun 14 '20 at 00:51
See how is your condition of comparison between r and weight: `if (camp1.innerHTML >= 0 && camp2.value <= 3)` — Aks Jacoves, Jun 14 '20 at 00:51
It should look something like: `if(camp1.innerHTML >= camp2.value) {// true}` — Aks Jacoves, Jun 14 '20 at 00:52
@AksJacoves ... I understand your approach (thanks), but I want to compare set values (between 0 and 1, between 1 and 3, between 3 and 5, between 5 and 10, etc.). Any ideas how can I solve it?. Thanks! — Pablo_Web, Jun 14 '20 at 00:58
Reread what you wrote in your question: In the second part, I want to compare if the value **"r =" is greater or less than the number written (por the user) in the input #peso**, but it doesn't work for me. — Aks Jacoves, Jun 14 '20 at 01:00
And about his last comment he is still confused: **(between 0 and 1, between 1 and 3, between 3 and 5, between 5 and 10, etc.)**. As well? Do you want to check if r and weight is between those ranges you just mentioned? for example, if it is between 0 and 1? — Aks Jacoves, Jun 14 '20 at 01:04
@AksJacoves ... Yes ... It is the most difficult part for me. I have to evaluate whether the condition is met (including whether or not the result of the calculation has decimals ...) — Pablo_Web, Jun 14 '20 at 01:08

score 1 · Answer 1 · answered Jun 14 '20 at 01:17

1

Just a small amendment to "if statement" in your comparar() function.

textContent has to be converted to number.

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

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

Please refer to this code pen example after this change, https://codepen.io/SathishVel/pen/KKVMvqj

answered Jun 14 '20 at 01:17

Sathish

71
4

Yes, I was also thinking the problem may have been comparing a string to an integer. – Nate G Jun 14 '20 at 01:27

score 0 · Answer 2 · answered Jun 14 '20 at 00:59

If r is greater than or less than peso then r != peso. The following comparar function should handle the second part.

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

Sven.hig · Answer 3 · 2020-06-14T01:37:25.893

There was some issues with your code hence why i didn't work first you should get the value using textContent var camp1= document.getElementById("resultado").textContent; second you are retrieving the value twice

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

it should be (camp1 >= 0 && camp2 <= 3)

finally for your code to work your if statement has to return a value

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

try this

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>

score 0 · Answer 4 · answered Jun 14 '20 at 01:40

From what you said you need to check if the values are in a certain range and also want to check if it has decimal places or not, so I will create two functions that do these two checks.

Function to check if a value is in a certain range:

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

Example of use:

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

Font: Check if a value is within a range of numbers credits Alexander

Function to check if the number has decimal places:

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

Example of use:

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

Note: In your algorithm you are using the following variables:

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

They are in string format, so you need to transform them into numbers before using them in these functions, so below them do:

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

Javascript - Calculate and compare

4 Answers4