how do i add change the value of a key value pair if i dont have the name of the key

Question

const itemBtns = document.querySelectorAll('[data-function]');

let inventory = {
    wood: 0,
    stone: 0,
    dirt: 0
}

itemBtns.forEach(e => {
    e.addEventListener('click', checkBtnFunc(e));
});

function checkBtnFunc(element) {
    let func = element.dataset.function;
    let item = element.dataset.item;

    appendItem(func, item);
}

function appendItem(func, item) {
    if (func == 'add') {
        if (item in inventory) {
            inventory.item += 1;
            console.log(inventory.item);
        }
    }
}

<div class="item-manager">
    <div class="wood-things item-container" data-itemType="wood">
        <svg class="twenty-by-twenty minus-item btn" data-item="wood" data-function="take" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
        <label class="wood-label item-label">Wood</label>
        <svg class="twenty-by-twenty add-item btn" data-item="wood" data-function="add" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
    </div>
    <div class="stone-things item-container" data-itemType="stone">
        <svg class="twenty-by-twenty minus-item btn" data-item="stone" data-function="take" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
        <label class="stone-label item-label">Stone</label>
        <svg class="twenty-by-twenty add-item btn" data-item="stone" data-function="add" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
    </div>
    <div class="dirt-things item-container" data-itemType="dirt">
        <svg class="twenty-by-twenty minus-item btn" data-item="dirt" data-function="take" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>
        <label class="dirt-label item-label">Dirt</label>
        <svg class="twenty-by-twenty add-item btn" data-item="dirt" data-function="add" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
    </div>
</div>

basically i want when i press the add button the value of the respective key increases, for example, if i were to press the add button next to wood, the wood key in inventory would be 1, all thats happening is its trying to add a new key to inventory called item when i do inventory.item += 1 how would i make it so it would do inventory.(name of the item) += 1

i tired doing inventory.item.toString() += 1 but that didnt work at all

how do i add change the value of a key value pair if i dont have the name of the key

0 Answers0