Можно ли упростить следующий код Javascript, но сохранить ту же функциональность

Question

Я написал следующий код Javascript, который увеличивает и уменьшает 3 отдельных входа на 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:

Я хотел бы иметь такую ​​же функциональность, но чувствую, что мог бы сделать это более простым способом. Я новичок в Javascript / JQuery, поэтому любые предложения будут оценены. Спасибо!

Answer 1

Вы можете заменить каждую отдельную функцию на более общую c, которая принимает два параметра: room_id и value_to_add. Таким образом, вы можете просто увеличивать и уменьшать любую комнату, используя значения +1 или -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;
}

Пример использования:

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)