1

Есть прогрессбар, в котором ползунок должен двигаться от 1 до 95% в соответствии со значением из input-а. В input можно ввести значение от 1 до 1000. Также есть дополнительные кнопки, которые устанавливают автоматические значения в него: минимальное/максимальное, больше/меньше и удвоить текущее значение. Проблема у меня в том, что при вводе значения вручную прогрессбар заполняется нормально. Но при нажатии на кнопки появляется ошибка "Uncaught TypeError: Cannot read property 'toLowerCase' of undefined". Не могу понять как мне из функции lessOrMore() правильно запустить функцию progressBar(), передав в неё получившееся значение.

https://codepen.io/Raneto4ka/pen/jONGOwR

html:

<div class="w-wheel">
  <div class="wheel">
    <div id="cont" data-pct="1">
      <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
        <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
      </svg>
    </div>
    <div class="w-controlBtn">
      <span class="controlBtn min">мин</span> 
      <span class="controlBtn controlBtn--step minus">-</span>
      <input id="percent" name="percent" type="text" placeholder="Ставка..." value="">
      <span class="controlBtn controlBtn--step plus">+</span> 
      <span class="controlBtn max">макс</span>
      <span class="controlBtn double">удвоить</span>
    </div>
  </div>
</div>

css:

.wheel {
  margin-top: 45px;
  #svg {
    transform: rotate(90deg);
  }
  #svg circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
    stroke: #666;
    stroke-width: 1.3em;
  }
  #svg #bar {
    stroke: #FF9F1E;
    stroke-dashoffset: 559.832px;
  }
  #cont {
    display: block;
    height: 200px;
    width: 200px;
    margin: 0 auto;
    border-radius: 100%;
    position: relative;
  }
  #cont:after {
    position: absolute;
    display: block;
    height: 160px;
    width: 160px;
    left: 50%;
    top: 50%;
    content: attr(data-pct)"%";
    margin-top: -80px;
    margin-left: -80px;
    border-radius: 100%;
    line-height: 160px;
    font-size: 2em;
    text-align: center;
  }

  input {
    color: #000;
    height: 50px;
    line-height: 50;
    width: 200px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 25px;
    padding-left: 65px;
  }
  .w-controlBtn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 55px;
  }
  .controlBtn {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    &.min {
      margin-right: 10px;
    }
    &.max {
      margin-left: 10px;
    }
    &.minus {
      margin-right: -50px;
    }
    &.plus {
      margin-left: -50px;
    }
    &.double {
      flex-basis: 100%;
      margin-top: 10px;
    }
  } 
  .controlBtn--step {
    color: #fff;
    background-color: orange;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 2;
    font-weight: bold;
  }
}

js:

function lessOrMore() {
    var inputValue = $('#percent').val();
    if($(this).hasClass("min")){
      inputValue = 1;
    }
    else if($(this).hasClass("max")){
      inputValue = 1000;
    }
    else if($(this).hasClass("plus")){
      inputValue++;
    }
    else if($(this).hasClass("minus")){
      inputValue--;
    }
    else if($(this).hasClass("double")){
      inputValue *= 2;
    }

      if (isNaN(inputValue)) {
       inputValue = 95; 
      }
      else{
        if (inputValue <= 1) { inputValue = 1;}
        if (inputValue > 1000) { inputValue = 1000;}
      }    

    $('#percent').val(inputValue);
progressBar(inputValue)
}

function progressBar(val){
  var val = parseInt($(this).val());
  var $circle = $('#svg #bar');

  if (isNaN(val)) {
   val = 95; 
  }
  else{
    var r = $circle.attr('r');
    var c = Math.PI*(r*2);
    if (val < 0) { val = 0;}
    if (val > 95) { val = 95;}

    var pct = ((100-val)/100)*c;

    $circle.css({ strokeDashoffset: pct});

    $('#cont').attr('data-pct',val);
  }
}

$('#percent').on('input', progressBar);
$('.controlBtn').on('click', lessOrMore);

1 ответ 1

1
function lessOrMore() {
  var inputValue = +$('#percent').val();
  ...
  $('#percent').val(inputValue);
  progressBar.call($('#percent')[0]); // !!!
}

function progressBar(){
  var val = parseInt($(this).val());
  var $circle = $('#svg #bar');
  ...
}
2
  • Спасибо, но теперь если вручную вводить значение в input, то прогрессбар не заполняется..
    – Елена
    2 сен 2019 в 20:41
  • Спасибо вам огромное! Так всё просто оказалось
    – Елена
    3 сен 2019 в 6:30

Ваш ответ

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

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