Incrementing and decrementing 3 seperate input values by 1 using Javascript I have written the following Javascript code which increments and decrements 3 separate inputs by 1:



//INCREMENTS/DECREMENTS BEDROOMS BY 1

function plusOneBedrooms() {
    var addRoom = document.getElementById('rooms_amount_bedroom');
    value = parseInt(addRoom.getAttribute('value'), 10) + 1;
    addRoom.setAttribute('value', value);
    addRoom.innerHTML = value;

}

function minusOneBedrooms() {
    var subtractRoom = document.getElementById('rooms_amount_bedroom');
    value = parseInt(subtractRoom.getAttribute('value'), 10) - 1;
    subtractRoom.setAttribute('value', value);
    subtractRoom.innerHTML = value;

}

//INCREMENTS/DECREMENTS BATHROOMS BY 1
function plusOneBathrooms() {
    var addRoom = document.getElementById('rooms_amount_bathrooms');
    value = parseInt(addRoom.getAttribute('value'), 10) + 1;
    addRoom.setAttribute('value', value);
    addRoom.innerHTML = value;

}

function minusOneBathrooms() {
    var subtractRoom = document.getElementById('rooms_amount_bathrooms');
    value = parseInt(subtractRoom.getAttribute('value'), 10) - 1;
    subtractRoom.setAttribute('value', value);
    subtractRoom.innerHTML = value;

}
//INCREMENTS/DECREMENTS KITCHENS BY 1
function plusOneKitchens() {
    var addRoom = document.getElementById('rooms_amount_kitchens');
    value = parseInt(addRoom.getAttribute('value'), 10) + 1;
    addRoom.setAttribute('value', value);
    addRoom.innerHTML = value;

}

function minusOneKitchens() {
    var subtractRoom = document.getElementById('rooms_amount_kitchens');
    value = parseInt(subtractRoom.getAttribute('value'), 10) - 1;
    subtractRoom.setAttribute('value', value);
    subtractRoom.innerHTML = value;

}
    &lt;div class="room_type_wrap"&gt;

        &lt;small class="counter_title counter_opacity1"&gt;Bedrooms&lt;/small&gt;
        &lt;hr class="counter_title_underline"&gt;
        &lt;div class="counter_wrap"&gt;
            &lt;div class="subtractRoom" onclick="minusOneBedrooms()"&gt;
                &lt;img src="./assets/images/arrow_down.png" alt="" class="counter_down_arrow"&gt;
            &lt;/div&gt;
            &lt;input type="number" class="room_count" id="rooms_amount_bedroom" autocomplete="off" value="0"&gt;
            &lt;div class="addRoom" onclick="plusOneBedrooms()"&gt;
                &lt;img src="./assets/images/arrow_up_white.png" alt="" class="counter_up_arrow"&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;small class="counter_title counter_opacity2"&gt;Bathrooms&lt;/small&gt;
        &lt;hr class="counter_title_underline"&gt;
        &lt;div class="counter_wrap"&gt;
            &lt;div class="subtractRoom" onclick="minusOneBathrooms()"&gt;
                &lt;img src="./assets/images/arrow_down.png" alt="" class="counter_down_arrow"&gt;
            &lt;/div&gt;
            &lt;input type="number" class="room_count" id="rooms_amount_bathrooms" autocomplete="off" value="0"&gt;
            &lt;div class="addRoom" onclick="plusOneBathrooms()"&gt;
                &lt;img src="./assets/images/arrow_up_white.png" alt="" class="counter_up_arrow"&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;small class="counter_title counter_opacity3"&gt;Kitchens&lt;/small&gt;
        &lt;hr class="counter_title_underline"&gt;
        &lt;div class="counter_wrap"&gt;
            &lt;div class="subtractRoom" onclick="minusOneKitchens()"&gt;
                &lt;img src="./assets/images/arrow_down.png" alt="" class="counter_down_arrow"&gt;
            &lt;/div&gt;
            &lt;input type="number" class="room_count" id="rooms_amount_kitchens" autocomplete="off" value="0"&gt;
            &lt;div class="addRoom" onclick="plusOneKitchens()"&gt;
                &lt;img src="./assets/images/arrow_up_white.png" alt="" class="counter_up_arrow"&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;




I would like to be able to have the same functionality but feel I could have probably done this in a simpler way. I'm new to Javascript/JQuery so any suggestions will be appreciated. Thanks!
Some things could be said about the HTML (no need for hr, border will do; those imgs should be background images on buttons; this is obviously a list; those smalls should be labels; way to many divs; ...) but let me focus on te JS as you are asking.

First thing that jumps out is the repetition. Each function basically does the same thing, but for a different room and with a different amount. Not very DRY at all. 

The easy solution would be to pass the room name and the change amount in the function as parameters, and now you only need one function. Something like this:

function changeValue(roomName, amount) { ...


You can them call your function from the onclick attribute like so:

&lt;div ... onclick="changeValue('bedroom', -1)"&gt;


You can now add more rooms without having to change the javascript, and if you decide to change something in your logic you only have to change it once.

Second thing that was already noticed in the comments, you are changing the innerHtml of your inputs, but there is no such thing on inputs (there is no opening and closing tag with 'innerhtml' between them). Changing the value will suffice.

Also, you mention and tag jQuery, but this is vanilla JS, not a line off jQuery in there (which is fine btw!)

Let me close by showing you how my code would look if I had to write it:

HTML:

&lt;ul id="rooms"&gt;
  &lt;li&gt;
    &lt;label for="bathroom_count"&gt;bathrooms&lt;/label&gt;
    &lt;button data-amount="-1"&gt;-&lt;/button&gt;
    &lt;input type="number" id="bathroom_count" value="0" autocomplete="off"/&gt;
    &lt;button data-amount="1"&gt;+&lt;/button&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="bedroom_count"&gt;bedrooms&lt;/label&gt;
    &lt;button data-amount="-1"&gt;-&lt;/button&gt;
    &lt;input type="number" id="bedroom_count" value="0" autocomplete="off"/&gt;
    &lt;button data-amount="1"&gt;+&lt;/button&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;label for="kitchen_count"&gt;kitchens&lt;/label&gt;
    &lt;button data-amount="-1"&gt;-&lt;/button&gt;
    &lt;input type="number" id="kitchen_count" value="0" autocomplete="off"/&gt;
    &lt;button data-amount="1"&gt;+&lt;/button&gt;
  &lt;/li&gt;
&lt;/ul&gt;


jQuery:

  $('#rooms li').on('click', 'button', function(e) {
    e.preventDefault();
    var $button = $(e.currentTarget);
    var $input = $button.siblings('input');

    $input.val(parseInt($input.val(), 10) + parseInt($button.data('amount'), 10));
  });


I think the code should speak for itself, but feel free to ask if you want me to elaborate. 

I hope you learned something from it and happy coding!