第二个Javascript函数没有运行[重复]

问题描述 投票：3回答：2

这个问题在这里已有答案：

我正在制作一个cookie点击器，商店打开正常。问题是，它没有关闭。有两个功能：开瓶器和闭门器。由于开启者被隐藏，然后闭门器打开。我不知道为什么这不起作用，而不是关闭。再一次，开启者的工作正常，但是更接近根本没有做任何事情。我甚至尝试使用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>
javascript html css html5 webpage
2个回答
2
投票

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

来自following page：

除了上述保留字之外，您最好避免使用以下标识符作为JavaScript变量的名称。这些是依赖于实现的JavaScript对象，方法或属性的预定义名称（可以说，有些应该是保留字）：... 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>
3
投票

看起来“关闭”可能是一个保留词。我将函数名称更改为“已关闭”并更新了按钮中的引用并且它正在工作。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.