CODEWITHSUNDEEP
javascriptcomparecalculatorcomparatorcalc
Pablo_Web
Pablo_Web

Reputation: 443

Javascript - Calculate and compare

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

Upvotes: 1

Views: 440

Answers (4)

Aks Jacoves
Aks Jacoves

Reputation: 877

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)

Upvotes: 0

Sven.hig
Sven.hig

Reputation: 4519

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>

Upvotes: 0

Sathish
Sathish

Reputation: 126

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

Upvotes: 1

Iyanu Adelekan
Iyanu Adelekan

Reputation: 406

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

Upvotes: 0

Related Questions