If statement on a span value

Question

How can I make an alert in jQuery when a price is higher than 400.

Look at there: <span class="element-price-value">424,97</span>

If value is higher than 400, I need to make an overlay modal popup that continue is not allowed and page need to refeshed.

Here is what I did but didn't work...

var price = $(".element-price-value");

if(price > 400){
    alert("Hello! I am an alert box!!");
}

use bootstrap or some custom styling to create modal overlay — Arun Kumar, Oct 03 '18 at 09:07
try changing this line var price = $(".element-price-value"); to var price = parseInt($(".element-price-value").val()); — Satya, Oct 03 '18 at 09:08
Did you try that condition by removing the comma in the value? — Rupesh Singra, Oct 03 '18 at 09:08
you are comparing string with int, convert your price to int and then compare `parseInt(price,10)` and get span text using `$(".element-price-value").text()` — Arun Kumar, Oct 03 '18 at 09:10
Possible duplicate of [How to edit a JavaScript alert box title?](https://stackoverflow.com/questions/1905289/how-to-edit-a-javascript-alert-box-title) — Morteza Jalambadani, Oct 03 '18 at 09:13
@MortezaJalambadani how is that question, about the title of alert boxes, in any way relevant to this question about reading an integer value from a `span`? — Rory McCrossan, Oct 03 '18 at 09:29

Peter · Accepted Answer · 2018-10-03T10:03:25.880

2

if(Number(price.text().replace(',', '.')) > 400){
  alert("Hello! I am an alert box!!");
}

You need to get the contents of <span>. Else you're just refering to the object. Then replace "," with "." and finally get the number from it.
You try to compare numbers, not text, nor objects.

You can see how price, price.text() and Number(price.text()); differ

var price = $(".element-price-value");

if(Number(price.text().replace(',', '.')) > 400){
  alert("Hello! I am an alert box!!");
} else {
  alert(price);
  alert(price.text());
  alert(Number(price.text()));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element-price-value">424.97</span>

edited Oct 03 '18 at 10:03

answered Oct 03 '18 at 09:14

Peter

1,844
2
31
55

But this runs when the page loads not when value is higher. – Chocoprins18 Oct 03 '18 at 09:42
The first 3 do, but the one in the `if()` condition does not. I know edited it into an `else{}` block. It would only run if the first condition was false. Just so you can see the difference. – Peter Oct 03 '18 at 10:01

score 1 · Answer 2 · answered Oct 03 '18 at 09:17

This code will also work if you will have in span 400,97

$(document).ready(function(){

  // Getting the value in span
  var value = $('.element-price-value').text();
  // or vanilla js that is faster
  // var value = document.querySelector('.element-price-value').innerText;
  
  // Converting to float and changeing comma to .
  value = parseFloat(value.replace(',','.'))
  
  if(value>400) alert('Higher than 400')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element-price-value">400,97</span>

score -1 · Answer 3 · answered Oct 03 '18 at 09:15

-1

Right now, you are getting only .element-price-value span, not the value inside. Please, use var price = $(".element-price-value").text(); to get the value inside that span, and parse it with parseInt() function.

So, the final result must be like: var price = parseInt($(".element-price-value").text());

answered Oct 03 '18 at 09:15

oisar

9
1

This logic is flawed. As you `parseInt()` only the value before the `,` is used, hence `400,97` does not trigger the `alert()`, when it should. – Rory McCrossan Oct 03 '18 at 09:27

score -2 · Answer 4 · edited Oct 29 '18 at 12:01

-2

If you have only a value inside span tag you can accomplish result like this:

var price = parseInt($(".element-price-value").text());
if(price > 400){
    alert("Hello! I am an alert box!!");
}

edited Oct 29 '18 at 12:01

Morteza Jalambadani

2,190
6
21
35

answered Oct 03 '18 at 09:11

narayansharma91

2,273
1
12
20

This logic is flawed. As you `parseInt()` only the value before the `,` is used, hence `400,97` does not trigger the `alert()`, when it should. – Rory McCrossan Oct 03 '18 at 09:26

If statement on a span value

4 Answers4