Не могу найти ошибку Javascript

415

14 августа 2017, 12:09

function summ() { 
  var tbl = document.getElementById('tbl').value; 
  var tbr = document.getElementById('tbr').value; 
  var bbr = document.getElementById('bbr').value; 
  var bbl = document.getElementById('bbl').value; 
  var ttl = document.getElementById('ttl').value; 
  var ttr = document.getElementById('ttr').value; 
  var btr = document.getElementById('btl').value; 
  var btl = document.getElementById('btl').value; 
  ttl.value = tbl; 
  ttr.value = tbr; 
  btr.value = bbr; 
  bbl.value = bbl; 
}

<p>Верхний левый угол 
  <input min="0" id="tbl" max="100" value="0" type="range"><input id="ttl" value="0" type="text"></p> 
<p>Верхний правый угол 
  <input min="0" id="tbr" max="100" value="0" type="range"><input id="ttr" value="0" type="text"></p> 
<p>Нижний правый угол 
  <input min="0" id="bbr" max="100" value="0" type="range"><input id="btr" value="0" type="text"></p> 
<p>Нижний левый угол 
  <input min="0" id="bbl" max="100" value="0" type="range"><input id="btl" value="0" type="text"></p>

Плиз подскажите где ошибка непонимаю

Answer 1

Функцию надо вызывать и не просто вызывать, а при каждом изменении значения ползунка.
Селекторы надо прописывать понятные а не ttl,ttr, btl и в таком духе. Вы же в своем же коде в них запутались

Вот пример оптимального кода:

document.getElementById('t1').onchange = function() { 
  document.getElementById('l1').value = this.value; 
}; 
document.getElementById('t2').onchange = function() { 
  document.getElementById('l2').value = this.value; 
}; 
document.getElementById('t3').onchange = function() { 
  document.getElementById('l3').value = this.value; 
}; 
document.getElementById('t4').onchange = function() { 
  document.getElementById('l4').value = this.value; 
};

<p>Верхний левый угол 
  <input min="0" id="t1" max="100" value="0" type="range"><input id="l1" value="0" type="text"></p> 
<p>Верхний правый угол 
  <input min="0" id="t2" max="100" value="0" type="range"><input id="l2" value="0" type="text"></p> 
<p>Нижний правый угол 
  <input min="0" id="t3" max="100" value="0" type="range"><input id="l3" value="0" type="text"></p> 
<p>Нижний левый угол 
  <input min="0" id="t4" max="100" value="0" type="range"><input id="l4" value="0" type="text"></p>

Answer 2

Ошибка в том, как Вы получаете элементы, чьи значения хотите изменить.

  var ttl = document.getElementById('ttl');
  var ttr = document.getElementById('ttr');
  var btr = document.getElementById('btl');
  var btl = document.getElementById('btl');
  ttl.value = tbl;
  ttr.value = tbr;
  btr.value = bbr;
  bbl.value = bbl;

Answer 3

Структура функции в любом языке программирования состоит из ее описания и вызова. Описание у Вас есть, а вот далее функция не вызывается.

Нужно после всего кода добавить строку summ();

в описании ошибки не смотрела

Answer 4

Если я верно понял в чем суть, то как-то так можно сделать :

document.addEventListener('DOMContentLoaded', function() { 
  var ranges = document.querySelectorAll('[type="range"]'); 
  for (var i = 0; i < ranges.length; i++) { 
    ranges[i].addEventListener('input', function() { 
      var val = this.value; 
 
      var _input = document.getElementById(this.id).closest('p').querySelector('[type="number"]'); 
      _input.value = val; 
    }); 
  } 
 
  var texts = document.querySelectorAll('[type="number"]'); 
  for (var i = 0; i < texts.length; i++) { 
    texts[i].addEventListener('input', function() { 
      var val = +this.value; 
 
      if (val > 100) this.value = 100; 
      if (val < 0) this.value = 0; 
      val = +this.value; 
 
      var _input = this.closest('p').querySelector('[type="range"]'); 
      _input.value = val; 
    }); 
  } 
});

input, 
label { 
  display: inline-block; 
} 
 
label { 
  width: 150px; 
}

<p> 
  <label>Верхний левый угол</label> 
  <input min="0" id="tbl" max="100" value="0" type="range"> 
  <input id="ttl" value="0" type="number" max="100" min="0"> 
</p> 
<p> 
  <label>Верхний правый угол</label> 
  <input min="0" id="tbr" max="100" value="0" type="range"> 
  <input id="ttr" value="0" type="number" max="100" min="0"> 
</p> 
<p> 
  <label>Нижний правый угол</label> 
  <input min="0" id="bbr" max="100" value="0" type="range"> 
  <input id="btr" value="0" type="number" max="100" min="0"> 
</p> 
<p> 
  <label>Нижний левый угол</label> 
  <input min="0" id="bbl" max="100" value="0" type="range"> 
  <input id="btl" value="0" type="number" max="100" min="0"> 
</p>

Вариант с одним обработчиком :

document.addEventListener('DOMContentLoaded', function() { 
  var inputs = document.querySelectorAll('input'); 
  for (var i = 0; i < inputs.length; i++) { 
    inputs[i].addEventListener('input', function() { 
      var type = this.getAttribute('type').toLowerCase(); 
      var _type = type == 'range' ? 'number' : 'range'; 
      var val = +this.value; 
 
      if (type == 'number') { 
        if (val > 100) this.value = 100; 
        if (val < 0) this.value = 0; 
        val = +this.value; 
      } 
 
      var _input = this.closest('p').querySelector('[type="' + _type + '"]'); 
      _input.value = val; 
    }); 
  } 
});

input, 
label { 
  display: inline-block; 
} 
 
label { 
  width: 150px; 
}

<p> 
  <label>Верхний левый угол</label> 
  <input min="0" id="tbl" max="100" value="0" type="range"> 
  <input id="ttl" value="0" type="number" max="100" min="0"> 
</p> 
<p> 
  <label>Верхний правый угол</label> 
  <input min="0" id="tbr" max="100" value="0" type="range"> 
  <input id="ttr" value="0" type="number" max="100" min="0"> 
</p> 
<p> 
  <label>Нижний правый угол</label> 
  <input min="0" id="bbr" max="100" value="0" type="range"> 
  <input id="btr" value="0" type="number" max="100" min="0"> 
</p> 
<p> 
  <label>Нижний левый угол</label> 
  <input min="0" id="bbl" max="100" value="0" type="range"> 
  <input id="btl" value="0" type="number" max="100" min="0"> 
</p>