CODEWITHSUNDEEP
javascripthtmlcssfirebase
AriesNinja
AriesNinja

Reputation: 55

onClick() trigger not working on Firebase webapp

Recently I started working with HTML and created a Firebase web app. I used Codepen to create a basic project in which an image element (the cookie) was tied to an onClick() event. It worked. I then uploaded it to Firebase and tried running it, and it didn't work.

HTML

<html>
<title>Aries - Cookie Clicker</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="main.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
  <h1>Cookie Clicker </h1>
  <div>
    <img id="cookie" src="http://pngimg.com/uploads/cookie/cookie_PNG13656.png" ondragstart="return false;"/>
  </div>
  
  <div id="scoresection">
    <div class="scoretext">
      <h2 id="counter">+1</h2>
      <h2> Cookies Clicked: </h2>
      <p id="score" class="numbers">0</p>
    </div>
  </div>
  
  <button onclick="resetClick()">Reset</button>

CSS

  width: 300px;
  margin: auto;
}

.numbers{
  font-size: 60px;
}

#scoresection{
  width: 600px;
  margin: auto;
}

body{
  font-family: arial;
  text-align: center;
  background-image: url("https://media.giphy.com/media/BHNfhgU63qrks/giphy.gif");
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  cursor: crosshair;
}

#counter{
  visibility: hidden;
  position: relative; left: 200px; bottom: 200px;
  font-size: 40px;
  animation-name: plusOne;
  animation-duration: 2s;
  animation-iteration-count: 1;
}

@keyframes plusOne{
  from{left: 200px; bottom: 200px;}
  to{left: 200px; bottom: 300px;}
}

button{
  padding: 10px;
  background-color: yellow;
}

cookie.pointer{
  cursor: pointer;
}

#reset{
  cursor: pointer
}

JavaScript

var cookie = document.getElementById("cookie");
var points = 0;
var counter = document.getElementById("counter")

cookie.onclick = addClick;

function addClick() {
  points += 1;
  score.innerHTML = points;
  counter.style.visibility = 'visible';
}

reset.onClick = resetClick;

function resetClick() {
  location.reload();
}

As you can probably see, its pretty simple but some help would be great. Thanks!

Upvotes: 1

Views: 698

Answers (1)

development-ninja
development-ninja

Reputation: 524

I have copied your code in my side and there was needed to update code.

  1. First you should include javascript code under the elements are placed. Browser will compile script from first to end in one flow so the order is essential to catch element in code.
  2. You don't have to link onclick to resetbutton by javascript because it has been already tied up to onclick event when reset button has been defined.

And you should keep typical html form as some tags are missing in your code. So you should update html code like below.

<html>
<title>Aries - Cookie Clicker</title>
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
</head>
<body>
  <h1>Cookie Clicker </h1>
  <div>
    <img id="cookie" src="http://pngimg.com/uploads/cookie/cookie_PNG13656.png" ondragstart="return false;"/>
  </div>
  
  <div id="scoresection">
    <div class="scoretext">
      <h2 id="counter">+1</h2>
      <h2> Cookies Clicked: </h2>
      <p id="score" class="numbers">0</p>
    </div>
  </div>
  <button onclick="resetClick()">Reset</button>
  <script src="main.js"></script>
</body>
</html>

I have deployed it to firebase hosting and it works! https://mytest-beb7e.web.app/

Upvotes: 2

Related Questions