0

Помогите, как вывести значение valuecalc в span MoneyBack При изменении значений любого из ползунков?

// функция бегунка, изменение значения при изменении положения
$(function() {
  var el;
  $("#range1").change(function() {
      el = $(this);
      el
        .next("#ong")
        .text(el.val());
    })
    .trigger('change');
});

// функция бегунка2, изменение значения при изменении положения
$(function() {
  var el;
  $("#range2").change(function() {
      el = $(this);
      el
        .next("#ong2")
        .text(el.val());
    })
    .trigger('change');
});

// все переменные
var
  valueran1, valueran2, valuecalc;


// сопоставление переменных с id в HTML
valueran1 = jQuery("#range1").val();
valueran2 = jQuery("#range2").val();

// конвертация в числа
valueran1 = parseInt(valueran1);
valueran2 = parseInt(valueran1);

// подсчёт результатов
valuecalc = valueran1 + valueran2;

// вывод
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding: 20px; width: 100%;">

  <div class="row mb-3">
    <div class="form-group col-md-12">
      <p class="badge badge-warning">Рыночная стоимость автомобиля</p>
      <div class="d-flex justify-content-center my-4">
        <span class="font-weight-bold indigo-text">200000</span>
        <input type="range" class="custom-range" min="200000" max="3000000" step="50000" id="range1" value="200000" />
        <output id="ong" for="range1">0</output>
        <span class="font-weight-bold indigo-text">3 000 000</span>
      </div>
    </div>
  </div>

  <div class="row mb-3">
    <div class="form-group col-md-12">
      <p class="badge badge-warning">Пробег</p>
      <div class="d-flex justify-content-center my-4">
        <span class="font-weight-bold indigo-text">1</span>
        <input type="range" class="custom-range" min="1" max="30" step="1" id="range2" value="1" />
        <output id="ong2" for="range2">0</output>
        <span class="font-weight-bold indigo-text">30</span>
      </div>
    </div>
  </div>

  Возврат: <span id="MoneyBack"></span>

</div>

1 ответ 1

1

// функция бегунка, изменение значения при изменении положения
$(function() {
  $("#range1").change(function() {
      var el = $(this);
      el.next("#ong")
        .text(el.val());
      refresh();
    })
    .trigger('change');
});

// функция бегунка2, изменение значения при изменении положения
$(function() {
  $("#range2").change(function() {
      var el = $(this);
      el.next("#ong2")
        .text(el.val());
      refresh();
    })
    .trigger('change');
});

function refresh() {
  // все переменные
  var valueran1, valueran2, valuecalc;

  // сопоставление переменных с id в HTML
  valueran1 = jQuery("#range1").val();
  valueran2 = jQuery("#range2").val();

  // конвертация в числа
  valueran1 = parseInt(valueran1);
  valueran2 = parseInt(valueran2);

  // подсчёт результатов
  valuecalc = valueran1 + valueran2;

  // вывод
  $("#MoneyBack").text(valuecalc);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="padding: 20px; width: 100%;">

  <div class="row mb-3">
    <div class="form-group col-md-12">
      <p class="badge badge-warning">Рыночная стоимость автомобиля</p>
      <div class="d-flex justify-content-center my-4">
        <span class="font-weight-bold indigo-text">200000</span>
        <input type="range" class="custom-range" min="200000" max="3000000" step="50000" id="range1" value="200000" />
        <output id="ong" for="range1">0</output>
        <span class="font-weight-bold indigo-text">3 000 000</span>
      </div>
    </div>
  </div>

  <div class="row mb-3">
    <div class="form-group col-md-12">
      <p class="badge badge-warning">Пробег</p>
      <div class="d-flex justify-content-center my-4">
        <span class="font-weight-bold indigo-text">1</span>
        <input type="range" class="custom-range" min="1" max="30" step="1" id="range2" value="1" />
        <output id="ong2" for="range2">0</output>
        <span class="font-weight-bold indigo-text">30</span>
      </div>
    </div>
  </div>

  Возврат: <span id="MoneyBack"></span>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.