Блог

Главная - Вопросы по программированию - Функция, которая считывает и отображает значение ползунка в разных цветах

Функция, которая считывает и отображает значение ползунка в разных цветах

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня возникли большие проблемы при попытке создать функцию, которая считывает значение, полученное из ползунка, а затем отображает его в разных цветах в соответствии с его значением.

Это код, который у меня есть до сих пор:

 function slider() {
  document.getElementById("formControlRange").oninput = function() {
    percentagem()
  };
}

function percentagem() {
  var val = document.getElementById("formControlRange").value document.getElementById('formOutput').innerHTML = val
  if ($("#formControlRange").val() >=
    50) {
    $("#formOutput").addClass("alert-sucess");
  } else {
    $("#formOutput").addClass("alert-danger");
  }
}
console.log(val)
} 
 <div class="form-row">
  <div class="form-group col-md-6">
    <label for="formControlRange">Com que percentagem recomendaria o Bootstrap a terceiros?</label>
    <input type="range" class="form-control-range" id="formControlRange" onchange="slider()" min="0" max="100">
  </div>
  <div class="form-group col-md-6">
    <h1><output id="formOutput" class=""></output></h1>
  </div>
</div>

Ответ №1:

Вы должны добавить класс «alert» к своему элементу, если хотите, чтобы «alert-success» и «alert-danger» работали. И вы должны сбрасывать классы каждый раз при изменении значения. Плюс будьте осторожны с точками с запятой и фигурными скобками.

 function slider() {
  document.getElementById("formControlRange").oninput = function() {
    percentagem()
  };
}

function percentagem() {
  var val = document.getElementById("formControlRange").value;
  document.getElementById('formOutput').innerHTML = val;
  $("#formOutput").removeClass("alert-sucess alert-danger");
  if ($("#formControlRange").val() >= 50) {
    $("#formOutput").addClass("alert-success");
  } else {
    $("#formOutput").addClass("alert-danger");
  }
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="formControlRange">Com que percentagem recomendaria o Bootstrap a terceiros?</label>
    <input type="range" class="form-control-range" id="formControlRange" onchange="slider()" min="0" max="100">
  </div>
  <div class="form-group col-md-6">
    <h1><output id="formOutput" class="alert"></output></h1>
  </div>
</div>
Метки: ,