时间戳

首页 > 解决方案 > 如何通过点击事件使用新值更新变量并使用相同事件撤消它

javascript - 如何通过点击事件使用新值更新变量并使用相同事件撤消它

问题描述

最近在做一个项目时，我不得不面对这个问题

我是 JavaScript 的初学者，现在找不到解决方案

JavaScript中有一个东西叫做toggle

喜欢，

btn.addEventListener('click', function run() {
    btn.classList.toggle('big')
})

这里的 btn 变量是我的 web 中的一个按钮。按照代码，如果我点击 btn ，一个名为 big 的类将被添加到元素中，如果我再次点击 btn ，该类将被删除

我想做类似的事情假设我有一个名为 box 的变量并且值为“空”

const box = 'empty'

现在我有一个 btn，它是可点击的。我想要的是当 btn 被点击时，box 的值将更改为“full”，当我再次单击它时，它将再次更改为“empty”

请帮我找到解决方案

标签： javascript

解决方案

我想出了一个解决方案，它对我来说是最简单的方法

是这样的

const btn = document.querySelector('.button');
const ball = document.querySelector('.ball');

let color = 'green'

function varToggle() {
  if (color == 'green') {
    color = 'red';
  }
  else {
    color = 'green';
  }
}

btn.addEventListener('click', function bla() {
  varToggle();
  btn.style.background = color;
})

推荐阅读