Increase value by 1 with the push of a button within two specified ranges using JavaScript

Question

Increase value by 1 with the push of a button within two specified ranges using JavaScript

I am looking to create buttons that will increase the value of both the first and second range by 1 when pressed, as well as decrease the value of both ranges by 1 when pressed.

Here is 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

javascript html css

Answer 1

Answer №1

function operate(){
   var valueOne = document.getElementById("range1").value;
   document.getElementById('out1').value=valueOne; 
   var valueTwo = document.getElementById("range2").value;
   document.getElementById('out2').value=valueTwo; 
  }
function addOne(){
   document.getElementById("range1").value++;
   document.getElementById("range2").value++;
   operate();
}
function subtractOne(){
   document.getElementById("range1").value--;
   document.getElementById("range2").value--;
   operate();
}

<input type="range" name="range1" step="1" value="20" min="0" max="100" oninput="operate(this.value)"  id="range1"/>
 <output id="out1">20</output>

<input type="range" name="range2" step="1" value="37" min="0" max="100" oninput="operate(this.value)"  id="range2"/>
<output id="out2">37</output>
<br>
<button onclick="addOne()">+</button><button onclick="subtractOne()">-</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

Defined two functions(and assigned them to the onclick events of the buttons)
Both functions add 1 or subtract 1 (++ and -- are shortcuts for +=1 and -=1)
Both functions invoke operate() to update the values of output tags.

For more details:

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

Answer 2

function operate(){
   var valueOne = document.getElementById("range1").value;
   document.getElementById('out1').value=valueOne; 
   var valueTwo = document.getElementById("range2").value;
   document.getElementById('out2').value=valueTwo; 
  }
function addOne(){
   document.getElementById("range1").value++;
   document.getElementById("range2").value++;
   operate();
}
function subtractOne(){
   document.getElementById("range1").value--;
   document.getElementById("range2").value--;
   operate();
}

<input type="range" name="range1" step="1" value="20" min="0" max="100" oninput="operate(this.value)"  id="range1"/>
 <output id="out1">20</output>

<input type="range" name="range2" step="1" value="37" min="0" max="100" oninput="operate(this.value)"  id="range2"/>
<output id="out2">37</output>
<br>
<button onclick="addOne()">+</button><button onclick="subtractOne()">-</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

Defined two functions(and assigned them to the onclick events of the buttons)
Both functions add 1 or subtract 1 (++ and -- are shortcuts for +=1 and -=1)
Both functions invoke operate() to update the values of output tags.

For more details:

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

Answer 3

Answer №2

Below is the code snippet that adds click events to buttons and increments or decrements values accordingly:

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>+ :increase by 1 for both fields</h2>
<h2>- :decrease by 1 for both fields</h2>
and see live changes

Answer 4

Below is the code snippet that adds click events to buttons and increments or decrements values accordingly:

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>+ :increase by 1 for both fields</h2>
<h2>- :decrease by 1 for both fields</h2>
and see live changes

Answer 5

Answer №3

If you're looking for an easy jQuery solution, here's a simple one:

$('#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

Answer 6

If you're looking for an easy jQuery solution, here's a simple one:

$('#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

Increase value by 1 with the push of a button within two specified ranges using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

If every object within the array contains a value in the specified property, then return true

Encountering a Null Pointer Exception when trying to locate an element on an AngularJS website using Selenium

Iterating through JSON objects in JavaScript using 'Foreach'

FilterTextBoxExtender in AJAX enables the input of carriage returns

What is the best way to transform a string into emojis using TypeScript or JavaScript?

How does the object scope receive, process, and prepare the update for display within the AngularJs view?

Using JavaScript to search for a specific string within a row and removing that row if the string is detected

Infinite scrolling with a dynamic background

Elm div contenteditable loses cursor position after content update

jQuery Ajax comes with a built-in method for validating serialized forms. This method allows

Dynamically shift the table footer to the bottom of a scrolling div by utilizing jQuery

Flex Display with Bootstrap for Responsive Tables

Is it possible for Javascript, AJAX, or JQuery to determine if a form has been manually inputted into

What is the ideal event to trigger a response when the user completes entering text into the search field in Vue.js?

Tips for accessing the parent method within a jQuery AJAX success function

What is the best way to incorporate web components into a React Js project?

The font-size transition using CSS3 is experiencing a lack of smoothness specifically in the

Rotate images using a JQuery plugin without using HTML tags, solely through passing the images in JavaScript

The AJAX function fails to trigger the MVC controller method

Build a Docker container for a project that requires utilizing yarn link for dependencies