Question

0

156

Views

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?

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T07:39:13.067Z

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>

Answer 2 · 2022-06-28T07:39:13.076Z

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

Answer 3 · 2022-06-28T07:39:13.084Z

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>

0

156

jQuery selector value returns undefined

3 answers

0

0

0

Find remote jobs

Andres GPT