按钮功能无法正常工作？

Question

所以我正在尝试编写这个简单的程序，该程序将计算进入画廊的访问者。问题是功能过着自己的生活。我可以看到这个（我说的是：“以前的条目：”）在画廊已满但只有一个时开始计数。我尝试了很多方法。我认为有时错误的是函数调用

let count = 0
let entryEl = document.getElementById("entry-el")
let leftEl = document.getElementById("left-el")
let countEl = document.getElementById("count-el")
let previousEl = document.getElementById("previous-el")

function peopleInShop() {
  count += 1
  countEl.textContent = count
  if (count <= 5) {
    window.alert("Welcome")
  }
  if (count >= 6 && count != 0) {
    window.alert("You can not Entry to the shop now! Wait till someone left the shop!")
  }
  if (count == 6) {
    count -= 1
    countEl.textContent = 5
  } else {
    pass
  }

}

function left() {
  count -= 1
  if (count == -1) {
    count += 1
  }
  countEl.textContent = count

}

function previousVisitors() {
  a = 0
  a = a + 1
  previousEl.textContent = a
}

<h1> People in the gallery:</h1>
<h2 id="count-el"> 0</h2>
<button id="entry-el" onclick="peopleInShop() ; previousVisitors()">Entry</button>
<button id="left-el" onclick="left()">Left</button>
<p> Previous Entries: </p>
<h3 id="previous-el">0</h3>
<br>
<p><u>Ther avarage quantity of people in the shop can not be higher than five persons!</u></p>

Answer 1

每次调用 previousVisitors() 时，

a 都设置为 0。您需要像其他人一样在函数外部声明变量。

let count = 0;
let entryEl = document.getElementById("entry-el");
let leftEl = document.getElementById("left-el");
let countEl = document.getElementById("count-el");
let previousEl = document.getElementById("previous-el");
let a = 0;

function peopleInShop() {
  //count += 1
  count++;
  countEl.textContent = count;
  if (count <= 5) {
    window.alert("Welcome");
  }
  if (count >= 6 && count !== 0) {
    window.alert("You can not Entry to the shop now! Wait till someone left the shop!");
  }
  if (count === 6) {
    //count -= 1;
    count--;
    countEl.textContent = 5;
  } else {
    //pass
  }

}

function left() {
  count--;
  if (count === -1) {
    count++;
  }
  countEl.textContent = count;

}

function previousVisitors() {
  a++;
  previousEl.textContent = a;
}

<h1> People in the gallery:</h1>
<h2 id="count-el"> 0</h2>
<button id="entry-el" onclick="peopleInShop() ; previousVisitors()">Entry</button>
<button id="left-el" onclick="left()">Left</button>
<p> Previous Entries: </p>
<h3 id="previous-el">0</h3>
<br>
<p><u>Ther avarage quantity of people in the shop can not be higher than five persons!</u></p>

此外，pass 是在 Python 而不是 JS 中声明的。您可以将这些括号留空。此外，在 JS（以及许多其他语言）中，+= 1 和 -= 1 可以分别缩写为 ++ 和 --。如果你知道两个变量总是相同的类型，那么你可以使用 === 而不是 == （仅限 JS）。 === 更快，因为 == 在 JS 中转换数据类型。另外，请以分号结束每一行。在 JS 中不是必需的，但它是一个标准，不像 Python.

Answer 2

嗨,

首先，您的代码中有 pass 未定义

所以js代码停止就行22

如果您没有关于故障的任何声明，只需删除 else 声明

在 previousVisitors 函数中，您在函数中声明了 a 变量

所以a总是=0

而你使用a = a + 1

所以以前的访客将永远是1

解决在global scoop而不是function

中声明a变量

像这样

let a = 0;
function previousVisitors() {
  a = a + 1;
  previousEl.textContent = a;
}

Answer 3

let a = 0    
function previousVisitors() {
  a +=1
  previousEl.textContent = a
}

在你的最后一个函数中：定义 "a" 变量，并在调用此函数时（按下按钮时）更新值，

像这样调用函数：

<button id="left-el" onclick="left();previousVisitors()">Left</button>

Answer 4

我建议你使用 js addEventListener 来监听你的移动事件（而且 querySelector 更好，因为你可以轻松地更改 selectors ):

document.querySelector(selector).addEventListener("click", callback);

在源代码中添加link

let count = 0;
let prevEntries = 0;

function counter(number) {
  if (count + number >= 0 && count + number <= 5 && prevEntries === 0) {
    count += number;
    document.querySelector("#count-el").innerHTML = count;
  } else {
    if (prevEntries + number >= 0 && count <= 5) {
      prevEntries += number;
    }

    document.querySelector("#previous-el").innerHTML = prevEntries;
  }
}

function addClickListener(selector, callback) {
  document.querySelector(selector).addEventListener("click", callback);
}

addClickListener("#entry-el", () => {
  counter(1);
});
addClickListener("#left-el", () => {
  counter(-1);
});

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>People in the gallery:</h1>
    <h2 id="count-el">0</h2>
    <button id="entry-el">
      Entry
    </button>
    <button id="left-el">Left</button>
    <p>Previous Entries:</p>
    <h3 id="previous-el">0</h3>
    <br />
    <p>
      <u
        >Ther avarage quantity of people in the shop can not be higher than five
        persons!</u
      >
    </p>

    <script src="./src/index.js"></script>
  </body>
</html>

按钮功能无法正常工作？

Button function not working like another one?

html

javascript

counting