在第一个和第二个范围上增加1个值的按钮-JavaScript

Button to increment 1 value on first and second range - JavaScript

本文关键字：1个 按钮 -JavaScript 增加 第一个 第二个 范围      更新时间：2023-09-26

我希望按钮在第一个和第二个范围上增加1个值，并在第一个或第二个范围上减少1个值

我的代码：

function run(){
  var one = document.getElementById("range1").value;
  document.getElementById('out1').value=one; 
   var two = document.getElementById("range2").value;
  document.getElementById('out2').value=two; 
  }
<input type="range" name="range1" step="1" value="20" min="0" max="100" oninput="run(this.value)"  id="range1"/>
 <output id="out1">20</output>
<input type="range" name="range2" step="1" value="37" min="0" max="100" oninput="run(this.value)"  id="range2"/>
<output id="out2">37</output>
<br>
<button>+</button><button>-</button><br><br><br>
<h2>+ :increment 1 value on both of them</h2>
<h2>- :decrement 1 value on both of them</h2>
and live change

function run(){
   var one = document.getElementById("range1").value;
   document.getElementById('out1').value=one; 
   var two = document.getElementById("range2").value;
   document.getElementById('out2').value=two; 
  }
function plus(){
   document.getElementById("range1").value++;
   document.getElementById("range2").value++;
   run();
}
function minus(){
   document.getElementById("range1").value--;
   document.getElementById("range2").value--;
   run();
}
<input type="range" name="range1" step="1" value="20" min="0" max="100" oninput="run(this.value)"  id="range1"/>
 <output id="out1">20</output>
<input type="range" name="range2" step="1" value="37" min="0" max="100" oninput="run(this.value)"  id="range2"/>
<output id="out2">37</output>
<br>
<button onclick="plus()">+</button><button onclick="minus()">-</button><br><br><br>
<h2>+ :increment 1 value on both of them</h2>
<h2>- :decrement 1 value on both of them</h2>
and live change

  • 创建了两个函数(并将它们分配给按钮的onclick事件(
  • 加1或减1(++和--是+=1和-=1的简写(
  • 这两个函数都调用run()来刷新输出标记的值

更多信息：

++：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment

--：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment

这是代码。在按钮中添加一个点击事件，并根据需要增加或减少值。

function run() {
  var one = document.getElementById("range1").value;
  document.getElementById('out1').value = one;
  var two = document.getElementById("range2").value;
  document.getElementById('out2').value = two;
}
function setNewValue(val) {
  var r1 = document.getElementById("range1");
  r1val = parseInt(r1.value) + val;
  if (r1val >= 0 && r1val <= 100) {
    r1.value = r1val;
    document.getElementById('out1').value = r1val;
  }
  var r2 = document.getElementById("range2");
  r2val = parseInt(r2.value) + val;
  if (r2val >= 0 && r2val <= 100) {
    r2.value = r2val;
    document.getElementById('out2').value = r2val;
  }
}
<input type="range" name="range1" step="1" value="20" min="0" max="100" oninput="run(this.value)" id="range1" />
<output id="out1">20</output>
<input type="range" name="range2" step="1" value="37" min="0" max="100" oninput="run(this.value)" id="range2" />
<output id="out2">37</output>
<br>
<button onclick="setNewValue(1)">+</button>
<button onclick="setNewValue(-1)">-</button>
<br>
<br>
<br>
<h2>+ :increment 1 value on both of them</h2>
<h2>- :decrement 1 value on both of them</h2>
and live change

如果您想要使用jQuery的简单解决方案：

$('#more').click(function() {
  $('#range1').val(parseInt($('#range1').val())+1);
  $('#out1').text($('#range1').val());
  $('#range2').val(parseInt($('#range2').val())+1);
  $('#out2').text($('#range2').val());
});
$('#less').click(function() {
  $('#range1').val(parseInt($('#range1').val())-1);
  $('#out1').text($('#range1').val())
  $('#range2').val(parseInt($('#range2').val())-1);
  $('#out2').text($('#range2').val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" name="range1" step="1" value="20" min="0" max="100" oninput="run(this.value)" id="range1" />
<output id="out1">20</output>
<input type="range" name="range2" step="1" value="37" min="0" max="100" oninput="run(this.value)" id="range2" />
<output id="out2">37</output>
<br>
<button id="more">+</button>
<button id="less">-</button>
<br>
<h2>+ :increment 1 value on both of them</h2>
<h2>- :decrement 1 value on both of them</h2>
and live change

相关文章：