Second Javascript function not running

Question

i'm making a cookie clicker, and the shop opens fine. The problem is, it doesn't close. There are two functions: the opener, and the closer. Since the opener is being hidden, then the closer opens. I don't know why this isn't really working, and not closing. Again, the opener works fine like it is supposed to, but the closer doesn't do anything at all. I even tried using console.log it just doesn't run the function. Thanks Here is my code:

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>

Sorry if I put too much code, I didn't know what to not include. — randomcoder, Feb 19 '19 at 00:19

score 3 · Answer 1 · answered Feb 19 '19 at 00:23

It looks like "close" might be a reserve word. I changed the function name to "closed" and updated the reference in the button and it's working.

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>

Yes that makes sense, thank you! So that's why close didn't work. — randomcoder, Feb 19 '19 at 00:24
Looks like. Check this out: http://www.javascripter.net/faq/reserved.htm — Doug F, Feb 19 '19 at 00:25

jo_va · Accepted Answer · 2019-02-19T00:29:34.747

Simply rename the function to something else than close() since it is a reserved word for closing the window.

From the 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 ...

Here is your code with close() renamed to 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>

Thanks so much! Might I ask why changing the name worked? It worked though, but how? — randomcoder, Feb 19 '19 at 00:23

Second Javascript function not running

2 Answers2