Spinner и Java Script

General issues related to the use of Metro 4
Post Reply
weerdsa
Posts: 4
Joined: Wed Apr 17, 2019 5:17 pm
Status: Offline

Spinner и Java Script

Post by weerdsa » Sat Aug 31, 2019 11:00 pm

Очень прошу помощи!
Есть input
<input type="text" class="input-small" data-role="spinner" data-min-value="0" data-max-value="9" value="1">
<input type="text" class="input-small" data-role="spinner" data-min-value="0" data-max-value="9" value="5">
<input type="text" class="input-small" data-role="spinner" data-min-value="0" data-max-value="9" value="2">

скрипт считает сумму input, выводит итоговое значение и каждое значение через запятую в:э
<input type="text" id="sum" value="" data-role="input" data-clear-button="false" readonly>
<dt>Баллы:</dt> <dd><input type="text" id="all" data-clear-button="false" data-role="input" readonly>

Если вручную вписать изменить число в исходных input, то всё сразу пересчитается и заменится, но если использовать кнопки + - spinner, то ничего не происходит.
Ткните меня пожалуйста носом, что исправить в скрипте, чтобы он понимал spinner metro ui

Спасибо

Code: Select all

    <script type="text/javascript">
        let sum   = document.getElementById('sum');
let all   = document.getElementById('all');

let small = document.querySelectorAll('.original-input'); 
let numbers = []; // Массив, куда запишутся все значения инпутов

for( let i = 0; i < small.length; i++ ){
  numbers.push( small[i].value ); // (*1)
  
  small[i].addEventListener('input', function(){
    numbers[i] = this.value; 
    updateResults();
  small[i].addEventListener('change', function(){ numbers[i] = this.value; updateResults(); });
  });
}
updateResults();

/************/

function updateResults(){
  sum.value = sumArr( numbers );
  all.value = numbers.join(',');
}

function sumArr(arr){
  let x = 0;
  for( let i = 0; i < arr.length; i++ ){
    x += +arr[i]; // (*2)
  }
  return x;
}
    </script>

User avatar
olton
Site Admin
Posts: 232
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sun Sep 01, 2019 1:58 pm

Create your code example on codepen.io or sendbox.org.ua

weerdsa
Posts: 4
Joined: Wed Apr 17, 2019 5:17 pm
Status: Offline

Post by weerdsa » Sun Sep 01, 2019 6:49 pm


User avatar
olton
Site Admin
Posts: 232
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sun Sep 01, 2019 7:14 pm


Post Reply