以下のような予算(class="budget"
)を費用(class="cost"
)が上回った場合に判定結果(class="result"
)に「予算オーバー」と表示したいですが上手くいきません。
ご教授のほどよろしくお願いいたします。
▼HTML
<div>
<div><span class="budget">100</span> <span class="cost">80</span> <span class="result"></span></div>
<div><span class="budget">50</span> <span class="cost">70</span> <span class="result"></span></div>
<div><span class="budget">30</span> <span class="cost">50</span> <span class="result"></span></div>
</div>
▼試したコード
<script>
var budget = $('.budget').text();
var cost = $('.cost').text();
if(budget < cost) {
$('.result').text('予算オーバー');
}
</script>
▼理想の結果
100 80
50 70 予算オーバー
30 50 予算オーバー
▼現状の結果
100 80 予算オーバー
50 70 予算オーバー
30 50 予算オーバー