javaScript中的if语句有问题答案

【问题标题】：I have a problem with if statement in javaScriptjavaScript中的if语句有问题
【发布时间】：2020-07-05 20:50:27
【问题描述】：

我想检查 show 的状态是否根据它改变按钮的 innerText 但是当我运行它时 else 语句不起作用

let showBtn = document.querySelector('.show-more');

showBtn.onclick = function () {
    let show = false;
    if (show === false) {
        showBtn.innerText = 'Show Less';
        show = true;
    } else {
        showBtn.innerText = 'Show more';
    }
}

【问题讨论】：

将show的声明移到你的函数之外，并在else中将show改回false
当您提出问题时，告诉我们会有所帮助：您是否收到错误消息或意外行为？

标签： javascript if-statement

【解决方案1】：

showBtn 在您的代码中每次点击时为 false。它不应在onclick 处理程序中分配。试试这个：

let showBtn = document.querySelector('.show-more');
let show = false;

showBtn.onclick = function() {
  if (show === false) {
    showBtn.innerText = 'Show Less';
  } else {
    showBtn.innerText = 'Show more';
  }
  show = !show;
}

&lt;button class="show-more" /&gt;Show&lt;/button&gt;

【讨论】：

【解决方案2】：

if 语句不起作用，因为您已经在函数中将 show 设置为 false。如果您希望 if 语句切换，您需要以某种方式检查/维护按钮文本的状态。以下是解决此问题的一种方法

Pt2：您应该设置 textContent，而不是 innerText（这是我最近遇到的一个问题）

let showBtn = document.querySelector('.show-more');


showBtn.onclick = function () {
   
if (!this.show) {
    showBtn.textContent = 'Show Less';
    this.show = true;
} else {
    showBtn.textContent = 'Show more';
    this.show = false;
}
}

【讨论】：

【解决方案3】：

重置show的值，每次点击都这样。

let showBtn = document.querySelector('.show-more');
show = false;

showBtn.onclick = function () {

    if (show === false) {
        showBtn.textContent= 'Show Less';
        show = true;
    } else {
        show = false
        showBtn.textContent= 'Show more';
    }
}

【讨论】：

【解决方案4】：

在这种情况下，不要在调用函数内部分配您的状态变量let show。当你这样做时，它会在你每次调用它时初始化变量。这会导致性能问题（请参阅变量初始化和垃圾收集），并且取决于您想要执行的操作，它会中断。

这里有人已经给出了答案，但在他们的答案中，变量声明在全局范围内。大多数人都同意 it's not a good idea 声明全局变量，尤其是像 show 这样的通用名称。稍后，随着代码库的增长，您可能会遇到冲突，并且您的代码将开始以您无法预测的方式运行。这可能是最普遍认可的编码约定。这是一个坏习惯。立即了解如何以正确的方式进行操作。

这两个 StackOverflow 答案包含的示例是生成有效的 modular code 以控制对象状态的良好起点：

包装函数：https://stackoverflow.com/a/50137216/1977609

这是实现按钮的另一种方式：https://stackoverflow.com/a/10452789/1977609

【讨论】：