Nov 20, 2022

# Solution 1 :

You could replace each individual function with a more generic one that takes two parameters: `room_id` and `value_to_add`. This way you can just increment and decrement any room using the values +1 or -1.

``````function addToRoom(room_id, value_to_add) {
var room = document.getElementById(room_id);
value = parseInt(room.getAttribute('value'), 10) + value_to_add;
room.setAttribute('value', value);
room.innerHTML = value;
}
``````

Example usage:

``````addToRoom('rooms_amount_bedroom', 1)
``````

# Problem :

I have written the following Javascript code which increments and decrements 3 separate inputs by 1:

JS CODE

``````//INCREMENTS/DECREMENTS BEDROOMS BY 1

function plusOneBedrooms() {
value = parseInt(addRoom.getAttribute('value'), 10) + 1;

}

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() {
value = parseInt(addRoom.getAttribute('value'), 10) + 1;

}

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() {
value = parseInt(addRoom.getAttribute('value'), 10) + 1;

}

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

}
``````

HTML CODE:

``````    <div class="room_type_wrap">

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

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

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

</div>

``````

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!

### Comment posted by codereview.stackexchange.com

“Is it possible…?”