首页 > 编程语言> > 第二个Javascript函数没有运行

第二个Javascript函数没有运行

2019-06-07 12:20:34 作者：互联网

参见英文答案 > onclick calling hide-div function not working 3个
> JavaScript function close() {} 3个
我正在制作一个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>

解决方法:

只需将函数重命名为close(),因为它是关闭窗口的保留字.

从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>

标签：javascript,css,html5,webpage,html
来源： https://codeday.me/bug/20190607/1193662.html