Question

addEventListener 点击问题

2020-02-09

47

javascript html

我正为一个奇怪的问题而苦恼。我正在为我的网站创建常见问题解答，我想创建一个按钮来隐藏/显示问题的答案。问题是……显示功能可以完美地工作并取消隐藏我的答案，但当我想再次隐藏它时它不起作用。我试过把 if 放进 if 中，但它也不起作用。到目前为止甚至无法在谷歌上找到答案。

也许我在试图重新发明轮子。如果有人知道如何以更简单的方式创建它，我将不胜感激。

const getHiddenElement = document.querySelector('.hidden-text1');
const getBtn = document.querySelector('.reveal-button1');

getBtn.addEventListener('click', () => {
  let counter = 0;

  if (counter == 0) {
    getHiddenElement.style.visibility = 'visible';
    getBtn.value = 'Hide';
    counter = 1;
  } else {
    getHiddenElement.style.visibility = 'hidden';
    getBtn.value = 'Reveal';
    counter = 0;
  }
});

<div class="question-1">
  <p>Who am I?</p>
  <input type="button" value="Reveal" class="reveal-button1" />
  <p class="hidden-text1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis tellus, aliquam vitae faucibus ac, volutpat varius nibh. Maecenas vitae dictum nisi, vel tempor turpis. Integer eget arcu ut arcu pretium ultricies. Nullam eros odio, blandit eu tellus
    vel, tincidunt auctor orci.
  </p>
</div>

Answer 1

问题是 counter 变量是本地变量，每次点击都会重新初始化。您可以将其设置为全局变量，它将按预期工作。

let counter = 0;
getBtn.addEventListener('click', () => {
    if (counter == 0) {
        getHiddenElement.style.visibility = 'visible';
        getBtn.value = 'Hide';
        counter = 1;
    } else {
        getHiddenElement.style.visibility = 'hidden';
        getBtn.value = 'Reveal';
        counter = 0;
    }
});

另一个选项是检查元素样式，而不是使用变量：

getBtn.addEventListener('click', () => {
    if (getHiddenElement.style.visibility === "hidden") {
        getHiddenElement.style.visibility = 'visible';
        getBtn.value = 'Hide';
    } else {
        getHiddenElement.style.visibility = 'hidden';
        getBtn.value = 'Reveal';
    }
});

Answer 2

每当调用该函数时，计数器变量都将被赋值为零，而不管其先前的值如何。要解决此问题，请全局声明 counter 变量。