函数在 onclick 中无法正确调用

Question

我有一个按钮，通过这个按钮，我试图调用两个函数，但它们似乎相互抵消了。

在控制台中它显示我已经对它们进行了编号并将它们连接到函数，例如第 1 行来自函数“addValue”中的 console.log。

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

第 2 行 - []

行 - 3 RepoList.js?5216:74 ['Name: graphqless Description: REST and GraphQ… URL: https://github.com/tylerbuchea/graphqless'] 本地存储为空。

当我点击按钮时期望的输出如下，应该调用功能一，只有再次点击后才能调用功能二。

值为字符串

函数

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

这就是我调用函数的方式

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

Answer 1

您需要添加逻辑来确定状态。不知何故，你需要一个布尔值来知道你处于什么状态。所以你要么翻转一个布尔变量，要么添加删除一个 class.

使用布尔值

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>

使用 class 可以让您拥有多个触发器。每个人都可以自己工作。

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>

函数在 onclick 中无法正确调用

functions not calling correctly in onclick

javascript

arrays

event-handling

reactjs