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)
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)

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() {
    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!

Comments

Comment posted by codereview.stackexchange.com

“Is it possible…?”

By

Leave a Reply

Your email address will not be published. Required fields are marked *