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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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