0

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>

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

1
  • Я насчитал ошибок пять если честно Commented 12 авг. 2017 в 14:29

4 ответа 4

2
  1. Функцию надо вызывать и не просто вызывать, а при каждом изменении значения ползунка.

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

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

const t1 = document.getElementById('t1');
const t2 = document.getElementById('t2');
const t3 = document.getElementById('t3');
const t4 = document.getElementById('t4');
const l1 = document.getElementById('l1');
const l2 = document.getElementById('l2');
const l3 = document.getElementById('l3');
const l5 = document.getElementById('l4');

t1.oninput = function() {
  l1.value = this.value;
};
t2.oninput = function() {
  l2.value = this.value;
};
t3.oninput = function() {
  l3.value = this.value;
};
t4.oninput = function() {
  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>

0
1

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

  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;
0

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

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

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

2
  • не совсем так, эту функцию надо вызывать не один раз, а при изменении ползунков, чтобы она меняла значение в текстовых полях Commented 12 авг. 2017 в 14:24
  • Ну да))) сама учу JS, спасибо) Commented 12 авг. 2017 в 14:51
0

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

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>

Ваш ответ

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

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