主页 / 问题 / 705263
Accepted
Дархан Урустимов
Asked:2020-08-12 21:27:13 +0000 UTC2020-08-12 21:27:13 +0000 UTC

找不到 javascript 错误

  • 772

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>

请告诉我错误在哪里

javascript

4 个回答

    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>

    • 2

  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;
    • 1
  3. Best Answer

    任何编程语言中的函数结构都由其描述和调用组成。您有一个描述，但是该函数没有被调用。

    您需要在所有代码之后添加行 summ() ；

    我没有查看错误的描述。

    • 0

  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>

    • 0

相关问题