functions not calling correctly in onclick-CodePudding

I have a button and with this button, I am trying to call two functions but instead, they seem to be cancelling each other out.

In the console it shows this I have numbered them and connected them to the function for example line 1 comes from the console.log in function "addValue".

line 1 - ['Name: graphqless Description: REST and GraphQ… URL: https://github.com/tylerbuchea/graphqless']

line 2 - []

line - 3 RepoList.js?5216:74 ['Name: graphqless Description: REST and GraphQ… URL: https://github.com/tylerbuchea/graphqless'] Localstorage is empty.

The desired output is as follows when I click the button, function one should be called and only after clicking again should function 2 be called.

the value is a string

The functions

const favs = JSON.parse(localStorage.getItem('name') || []);




    function addValue(e) {
        if (e.target.value !== "") {
          
          if (!favs.includes(e.target.value)) {
            favs.push(e.target.value);
            localStorage.setItem("name", JSON.stringify(favs));
//line 1            
console.log(favs);
            document.getElementById("favsarray").innerHTML =  favs
          }
        }
      }

  





//Check if value is in the array, if it then remove the value from both the array and localstorage
  f

unction removeValue(e, value) {
        if (e.target.value !== "") {
          //delete from array
          favs.pop(e.target.value);
//line 2          
console.log(favs);
          //change the div text
          document.getElementById("favsarray").innerHTML = favs;
          //get the values from localstorage- parse
          const stored = JSON.parse(localStorage.getItem("name"));
          //delete the value
          delete stored[(value, e.target.value)];
          //store the new array as a string
          localStorage.setItem("name", JSON.stringify(favs));
//line 3          
console.log(stored);
        }
      }

This is how I am calling the function

onClick={(e)=> {addValue(e); removeValue(e);}}

CodePudding user response：

You need to add logic to determines the state. Somehow you need a boolean to know what state you are in. so either you flip a boolean variable or you add remove a class.

Using a Boolean

function doAdd(elem) {
  console.log("add called", elem);
}

function doRemove(elem) {
  console.log("remove called", elem);
}

let actionSate = false;
function doAction(e) {
  const elem = e.currentTarget;
  actionSate = !actionSate;
  if (actionSate) {
    doAdd(elem);
  } else {
    doRemove(elem);
  }
}

<button type="button" onclick="doAction(event)">Click</button>

Using a class allows you to have more than one trigger. Each one can work by themselves.

function doAdd(elem) {
  console.log("add called", elem);
}

function doRemove(elem) {
  console.log("remove called", elem);
}


function doAction(e) {
  const elem = e.currentTarget;
  elem.classList.toggle("action");
  if (elem.classList.contains("action")) {
    doAdd(elem);
  } else {
    doRemove(elem);
  }
}

.action {
  color: blue;
}

<button type="button" onclick="doAction(event)">Click 1</button>
<button type="button" onclick="doAction(event)">Click 2</button>