CODEWITHSUNDEEP
javascriptjquery
Lucas Wojnar
Lucas Wojnar

Reputation: 39

jQuery selector value returns undefined

I'm getting undefined of my variable 'base' which is basic $('slider').value. I have added a console.log(base) to test what is returned, but the value is undefined.

Here is my html:

jQuery(document).ready(function($) {

  let precentage = 17.5;
  let commision = 0.2746;

  function cost() {
    let base = $('#slider').value;
    let precentAmout = base * (precentage / 365 * 30);
    let commisionAmout = base * commision;
    let totalCost = commisionAmout + precentAmout;
    let totalSum = base + commisionAmout + precentAmout;

    console.log(base);


    $('#cost').text(totalCost);
    $('#sum').text(totalSum);
  }


  $('#slider').on('change', function() {
    $('#amout').text(this.value);
    cost();
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc">
  <div class="range-title">
    <h2 class="range-label">Ile chcesz pożyczyć?</h2>

    <div class="display-wrap">
      <span id="amout">500</span><span class="currency"> zł</span>
    </div>
  </div>
  <div class="range-wrap">
    <button class="buttons-change-value">-</button>
    <input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500">
    <button class="buttons-change-value">+</button>
  </div>
  <div class="summary-container">
    <div class="summary-box">
      <h3>Koszt:<br>
        <span id="cost">200</span><span class="currency"> zł</span></h3>
    </div>
    <div class="summary-box">
      <h3>Do zwrotu:<br>
        <span id="sum">200</span><span class="currency"> zł</span></h3>
    </div>
    <div class="summary-box">
      <h3>RRSO:<br>
        <span id="rrso">200</span><span class="percentage"> %</span></h3>
    </div>
  </div>
</div>

Do You have an idea why this is happening?

Upvotes: 0

Views: 575

Answers (3)

Clive Machado
Clive Machado

Reputation: 1785

You can always pass the base variable value as a parameter to the cost function like this cost(this.value). That would make more sense since you are already fetching the slider value once via onChange no need to do it again inside the cost function.

Please take a look at the working snippet below.

jQuery(document).ready(function ($) {

let precentage = 17.5;
let commision = 0.2746;

function cost(sliderValue) {
    let base = sliderValue;
    let precentAmout = base * (precentage / 365 * 30);
    let commisionAmout = base * commision;
    let totalCost = commisionAmout + precentAmout;
    let totalSum = base + commisionAmout + precentAmout;

    console.log(base);


    $('#cost').text(totalCost);
    $('#sum').text(totalSum);
}


$('#slider').on('change', function () {
    $('#amout').text(this.value);
    cost(this.value);
});})
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="calc">
      <div class="range-title">
          <h2 class="range-label">Ile chcesz pożyczyć?</h2>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

          <div class="display-wrap">
              <span id="amout">500</span><span class="currency"> zł</span>
          </div>
      </div>
      <div class="range-wrap">
          <button class="buttons-change-value">-</button>
          <input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500">
          <button class="buttons-change-value">+</button>
      </div>
      <div class="summary-container">
          <div class="summary-box">
              <h3>Koszt:<br>
                  <span id="cost">200</span><span class="currency"> zł</span></h3>
          </div>
          <div class="summary-box">
              <h3>Do zwrotu:<br>
                  <span id="sum">200</span><span class="currency"> zł</span></h3>
          </div>
          <div class="summary-box">
              <h3>RRSO:<br>
                  <span id="rrso">200</span><span class="percentage"> %</span></h3>
          </div>
      </div>
  </div>
</body>
</html>

Upvotes: 0

Ajay Gupta
Ajay Gupta

Reputation: 831

In JQuery, .val() function is available to get value of textbox.

 let base = $('#slider').val()


jQuery(document).ready(function($) {

  let precentage = 17.5;
  let commision = 0.2746;

  function cost() {
    let base = $('#slider').val();
    let precentAmout = base * (precentage / 365 * 30);
    let commisionAmout = base * commision;
    let totalCost = commisionAmout + precentAmout;
    let totalSum = base + commisionAmout + precentAmout;

    console.log(base);


    $('#cost').text(totalCost);
    $('#sum').text(totalSum);
  }


  $('#slider').on('change', function() {
    $('#amout').text(this.value);
    cost();
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc">
  <div class="range-title">
    <h2 class="range-label">Ile chcesz pożyczyć?</h2>

    <div class="display-wrap">
      <span id="amout">500</span><span class="currency"> zł</span>
    </div>
  </div>
  <div class="range-wrap">
    <button class="buttons-change-value">-</button>
    <input id="slider" class="range-input" type="range" min="500" max="1500" step="50" value="500">
    <button class="buttons-change-value">+</button>
  </div>
  <div class="summary-container">
    <div class="summary-box">
      <h3>Koszt:<br>
        <span id="cost">200</span><span class="currency"> zł</span></h3>
    </div>
    <div class="summary-box">
      <h3>Do zwrotu:<br>
        <span id="sum">200</span><span class="currency"> zł</span></h3>
    </div>
    <div class="summary-box">
      <h3>RRSO:<br>
        <span id="rrso">200</span><span class="percentage"> %</span></h3>
    </div>
  </div>
</div>

Upvotes: 1

Quentin
Quentin

Reputation: 943108

jQuery objects don't have a value property, they have a val() method.

Upvotes: 0

Related Questions