jQuery selector value returns undefined-CodePudding

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 >
  <div >
    <h2 >Ile chcesz pożyczyć?</h2>

    <div >
      <span id="amout">500</span><span > zł</span>
    </div>
  </div>
  <div >
    <button >-</button>
    <input id="slider"  type="range" min="500" max="1500" step="50" value="500">
    <button > </button>
  </div>
  <div >
    <div >
      <h3>Koszt:<br>
        <span id="cost">200</span><span > zł</span></h3>
    </div>
    <div >
      <h3>Do zwrotu:<br>
        <span id="sum">200</span><span > zł</span></h3>
    </div>
    <div >
      <h3>RRSO:<br>
        <span id="rrso">200</span><span > %</span></h3>
    </div>
  </div>
</div>

Do You have an idea why this is happening?

CodePudding user response：

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 >
  <div >
    <h2 >Ile chcesz pożyczyć?</h2>

    <div >
      <span id="amout">500</span><span > zł</span>
    </div>
  </div>
  <div >
    <button >-</button>
    <input id="slider"  type="range" min="500" max="1500" step="50" value="500">
    <button > </button>
  </div>
  <div >
    <div >
      <h3>Koszt:<br>
        <span id="cost">200</span><span > zł</span></h3>
    </div>
    <div >
      <h3>Do zwrotu:<br>
        <span id="sum">200</span><span > zł</span></h3>
    </div>
    <div >
      <h3>RRSO:<br>
        <span id="rrso">200</span><span > %</span></h3>
    </div>
  </div>
</div>

CodePudding user response：

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

CodePudding user response：

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 >
      <div >
          <h2 >Ile chcesz pożyczyć?</h2>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

          <div >
              <span id="amout">500</span><span > zł</span>
          </div>
      </div>
      <div >
          <button >-</button>
          <input id="slider"  type="range" min="500" max="1500" step="50" value="500">
          <button > </button>
      </div>
      <div >
          <div >
              <h3>Koszt:<br>
                  <span id="cost">200</span><span > zł</span></h3>
          </div>
          <div >
              <h3>Do zwrotu:<br>
                  <span id="sum">200</span><span > zł</span></h3>
          </div>
          <div >
              <h3>RRSO:<br>
                  <span id="rrso">200</span><span > %</span></h3>
          </div>
      </div>
  </div>
</body>
</html>