How else does it work when if=true in javascript?

Viewed 29

How can else work even though it returns if=true in newProduct() function in Javascript? If if(!isEditProduct)=true how can else work? What is the logic of this?

'use strict';

let productListArray=[
    {'productName':'product_0', 'productId':'prdctID_0'},
    {'productName':'product_1', 'productId':'prdctID_1'},
    {'productName':'product_2', 'productId':'prdctID_2'}];

let productListHTML=document.getElementById('product-list');
let inputBox=document.getElementById('input-box');
let productDelAddIcons=document.getElementById('del-add');
let inputBoxBtn=document.getElementById('input-btn');

showDisplay()

function showDisplay(){
    productListHTML.innerHTML='';
    for(let product of productListArray){
        let productHTML=`
        <div class="product" id="${product.productId}">
            <div class="check-h1">
                <input type="checkbox" name="" id="">
                <h1>${product.productName}</h1>
            </div>
            <div id="del-add">
                <i class="fa-solid fa-trash" id="trash-btn" onclick="deleteProduct(${product.productId})"></i>
                <i class="fa-solid fa-pen-to-square" onclick="editProduct(${product.productId}, '${product.productName}')"></i>
            </div>
        </div>
        `;
        productListHTML.insertAdjacentHTML('beforeend', productHTML);
    };
}

/*  */

inputBoxBtn.addEventListener('click', newProduct);
/* inputBoxBtn.addEventListener('keypress', function(){
    if(event.key=='Enter'){
        inputBoxBtn.click();
    };
}); */

let inputText=document.getElementById('input-text');
let editId;
let isEditProduct=false;

function newProduct(){
    if(!isEditProduct){
        //  adding...
        productListArray.push({'productName':inputText.value, 'productId':'prdctID_'+productListArray.length});
    } else{
        //  updating...
        for(let product of productListArray){
            if(product.productId==editId.id){
                product.productName=inputText.value;
            }
            isEditProduct=false;
            inputBoxBtn.innerHTML='ADD';
        }
    }
    
    inputText.value='';
    showDisplay();
    console.log(productListArray);
}

/*  */

function editProduct(product_id, product_name){
    editId=product_id;
    isEditProduct=true;
    inputText.value=product_name;
    inputText.focus();
    inputBoxBtn.innerHTML='SAVE';
};

/*  */

let deletedId;
function deleteProduct(id){
    for(let index=0; index<productListArray.length; index++){
        if(productListArray[index].productId==id.id){
            console.log(productListArray[index].productId);
            deletedId=index;
            id.remove();
        };
    };
    productListArray.splice(deletedId, 1);
    console.log(productListArray);
};

/*  */

console.log(productListArray);
0 Answers
Related