Jack King Jack King - 3 months ago 10
CSS Question

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

i want button to increment 1 value to first and second range and button decrement 1 value on first and second range

my code:



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




Answer

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

  • Created two functions(and assigned them to the onclick events of the buttons)
  • Both either add 1 or substract 1 (++ and -- are shorthand for +=1 and -=1)
  • Both functions call run() in order to refresh the values of output tags.

More info:

++: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

Comments