第二个 Javascript 函数不是运行

Question

我正在做一个曲奇饼干唱首歌，商店开得很好。问题是，它没有关闭。有两个功能：开启器和关闭器。由于开启器被隐藏，关闭器打开。我不知道为什么这没有真正起作用，也没有关闭。再一次，开瓶器像预期的那样工作正常，但关闭器根本没有做任何事情。我什至尝试使用 console.log 它只是没有运行这个功能。谢谢这是我的代码：

var clicks = 0;
var newthing;
var deg;

function add() {
  clicks = clicks + 1;
  newthing = 20 * clicks;
  deg = newthing + "deg"
  document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
  document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}

function toggleshop() {
  document.getElementById('shop').classList.toggle('hide');
  document.getElementById('toggler1').classList.toggle('hide');

}

function close() {
  console.log('asdf');
  document.getElementById('shop').classList.toggle('hide');
  console.log('asdfad');
  document.getElementById('toggler1').classList.toggle('hide');
}

body {
  background: linear-gradient(#ff8080, lightgreen, skyblue);
  height: 100vw;
  text-align: center;
}

h1 {}

.cookie {
  margin-top: 0px;
  background-image: url(cookie.png);
  padding: 150px;
  display: inline-block;
  color: black;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
  transition: 1s;
  position: relative;
  text-align: center;
  margin-right: auto;
}

.cookie:hover {
  border: 2px solid black;
  border-radius: 1000000000px;
  /* padding-left: -10px;
    padding-top: 180px; */
}

#inner {
  max-width: 50%;
  margin: auto;
}

#inner:hover {}

#shop {
  width: 75%;
  border: 2px solid black;
  margin: auto;
  margin-top: 90px;
}

#row1 {
  width: 49%;
  border: 1px solid black;
  height: 300px;
  display: inline-block;
}

#row2 {
  width: 49%;
  border: 1px solid black;
  height: 300px;
  display: inline-block;
}

button {
  width: 75%;
  background-color: black;
  color: white;
  height: 10%;
  font-size: 100%;
  cursor: pointer;
}

.hide {
  display: none;
}

#shop {
  background-color: white;
  position: relative;
  z-index: 10;
  bottom: 400px;
  opacity: .9;
}

.hide1 {}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <h1>Cookie Baker</h1>
  <p>Click the Cookie to make cookies!</p>
  <div class="cookie" onclick="add();">
    <h1 id="inner">Click Me!</h1>
  </div>
  <button onclick="toggleshop();" id="toggler1">Open Shop</button>
  <div id="shop" class="hide">
    <h1>Shop</h1>
    <button onclick="close();">Close Shop</button>
    <div id="row1">
      <h2>Click Multipliers:</h2>
      <button>2x per click</button>
      <button>3x per click</button>
      <button>5x per click</button>
      <button>10x per click</button>
      <button>15x per click</button>
    </div>
    <div id="row2">
      <h2>Auto Clickers</h2>
      <button>+1 per second</button>
      <button>+2 per second</button>
      <button>+3 per second</button>
      <button>+5 per second</button>
      <button>+10 per second</button>

    </div>
  </div>


</body>

</html>

Answer 1

只需将函数重命名为 close() 以外的其他名称，因为它是关闭 window 的保留字。

来自following page：

In addition to the above reserved words, you'd better avoid the following identifiers as names of JavaScript variables. These are predefined names of implementation-dependent JavaScript objects, methods, or properties (and, arguably, some should have been reserved words): ... close ...

这是您的代码 close() 重命名为 closeShop()。

var clicks = 0;
var newthing;
var deg;

function add() {
  clicks = clicks + 1;
  newthing = 20 * clicks;
  deg = newthing + "deg"
  document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
  document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}

function toggleshop() {
  document.getElementById('shop').classList.toggle('hide');
  document.getElementById('toggler1').classList.toggle('hide');
}

function closeShop() {
  console.log('asdf');
  document.getElementById('shop').classList.toggle('hide');
  console.log('asdfad');
  document.getElementById('toggler1').classList.toggle('hide');
}

body {
  background: linear-gradient(#ff8080, lightgreen, skyblue);
  height: 100vw;
  text-align: center;
}

h1 {}

.cookie {
  margin-top: 0px;
  background-image: url(cookie.png);
  padding: 150px;
  display: inline-block;
  color: black;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
  transition: 1s;
  position: relative;
  text-align: center;
  margin-right: auto;
}

.cookie:hover {
  border: 2px solid black;
  border-radius: 1000000000px;
  /* padding-left: -10px;
    padding-top: 180px; */
}

#inner {
  max-width: 50%;
  margin: auto;
}

#inner:hover {}

#shop {
  width: 75%;
  border: 2px solid black;
  margin: auto;
  margin-top: 90px;
}

#row1 {
  width: 49%;
  border: 1px solid black;
  height: 300px;
  display: inline-block;
}

#row2 {
  width: 49%;
  border: 1px solid black;
  height: 300px;
  display: inline-block;
}

button {
  width: 75%;
  background-color: black;
  color: white;
  height: 10%;
  font-size: 100%;
  cursor: pointer;
}

.hide {
  display: none;
}

#shop {
  background-color: white;
  position: relative;
  z-index: 10;
  bottom: 400px;
  opacity: .9;
}

.hide1 {}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <h1>Cookie Baker</h1>
  <p>Click the Cookie to make cookies!</p>
  <div class="cookie" onclick="add();">
    <h1 id="inner">Click Me!</h1>
  </div>
  <button onclick="toggleshop();" id="toggler1">Open Shop</button>
  <div id="shop" class="hide">
    <h1>Shop</h1>
    <button onclick="closeShop();">Close Shop</button>
    <div id="row1">
      <h2>Click Multipliers:</h2>
      <button>2x per click</button>
      <button>3x per click</button>
      <button>5x per click</button>
      <button>10x per click</button>
      <button>15x per click</button>
    </div>
    <div id="row2">
      <h2>Auto Clickers</h2>
      <button>+1 per second</button>
      <button>+2 per second</button>
      <button>+3 per second</button>
      <button>+5 per second</button>
      <button>+10 per second</button>

    </div>
  </div>


</body>

</html>

Answer 2

看起来 "close" 可能是一个保留字。我将函数名称更改为 "closed" 并更新了按钮中的引用，它正在运行。

var clicks = 0;
var newthing;
var deg;

function add() {
  clicks = clicks + 1;
  newthing = 20 * clicks;
  deg = newthing + "deg"
  document.getElementById('inner').innerHTML = "You have: " + clicks + " cookies";
  document.body.style.background = `linear-gradient(${deg}, #ff8080, lightgreen, skyblue)`;
}

function toggleshop() {
  document.getElementById('shop').classList.toggle('hide');
  document.getElementById('toggler1').classList.toggle('hide');

}

function closed() {
  console.log('asdf');
  document.getElementById('shop').classList.toggle('hide');
  console.log('asdfad');
  document.getElementById('toggler1').classList.toggle('hide');
}

body {
  background: linear-gradient(#ff8080, lightgreen, skyblue);
  height: 100vw;
  text-align: center;
}

h1 {}

.cookie {
  margin-top: 0px;
  background-image: url(cookie.png);
  padding: 150px;
  display: inline-block;
  color: black;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
  transition: 1s;
  position: relative;
  text-align: center;
  margin-right: auto;
}

.cookie:hover {
  border: 2px solid black;
  border-radius: 1000000000px;
  /* padding-left: -10px;
    padding-top: 180px; */
}

#inner {
  max-width: 50%;
  margin: auto;
}

#inner:hover {}

#shop {
  width: 75%;
  border: 2px solid black;
  margin: auto;
  margin-top: 90px;
}

#row1 {
  width: 49%;
  border: 1px solid black;
  height: 300px;
  display: inline-block;
}

#row2 {
  width: 49%;
  border: 1px solid black;
  height: 300px;
  display: inline-block;
}

button {
  width: 75%;
  background-color: black;
  color: white;
  height: 10%;
  font-size: 100%;
  cursor: pointer;
}

.hide {
  display: none;
}

#shop {
  background-color: white;
  position: relative;
  z-index: 10;
  bottom: 400px;
  opacity: .9;
}

.hide1 {}

<!DOCTYPE html>
<html>

<head>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <h1>Cookie Baker</h1>
  <p>Click the Cookie to make cookies!</p>
  <div class="cookie" onclick="add();">
    <h1 id="inner">Click Me!</h1>
  </div>
  <button onclick="toggleshop();" id="toggler1">Open Shop</button>
  <div id="shop" class="hide">
    <h1>Shop</h1>
    <button onclick="closed();">Close Shop</button>
    <div id="row1">
      <h2>Click Multipliers:</h2>
      <button>2x per click</button>
      <button>3x per click</button>
      <button>5x per click</button>
      <button>10x per click</button>
      <button>15x per click</button>
    </div>
    <div id="row2">
      <h2>Auto Clickers</h2>
      <button>+1 per second</button>
      <button>+2 per second</button>
      <button>+3 per second</button>
      <button>+5 per second</button>
      <button>+10 per second</button>

    </div>
  </div>


</body>

</html>

第二个 Javascript 函数不是运行

Second Javascript function not running

html

javascript

css

webpage

第二个 Javascript 函数不是 运行

Second Javascript function not running

html

javascript

css

webpage

第二个 Javascript 函数不是运行