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)
addToRoom('rooms_amount_bedroom', -1)
addToRoom('rooms_amount_bathrooms', 1)
addToRoom('rooms_amount_bathrooms', -1)
addToRoom('rooms_amount_kitchens', 1)
addToRoom('rooms_amount_kitchens', -1)
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() {
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;
}
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">
<div class="addRoom" onclick="plusOneBedrooms()">
<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">
<div class="addRoom" onclick="plusOneBathrooms()">
<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">
<div class="addRoom" onclick="plusOneKitchens()">
<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!