时间戳

首页 > 解决方案 > onClick() 触发器在 Firebase webapp 上不起作用

javascript - onClick() 触发器在 Firebase webapp 上不起作用

问题描述

最近我开始使用 HTML 并创建了一个 Firebase 网络应用程序。我使用 Codepen 创建了一个基本项目，其中图像元素（cookie）与 onClick() 事件相关联。有效。然后我将它上传到 Firebase 并尝试运行它，但它没有用。

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();
}

正如您可能看到的那样，它非常简单，但有些帮助会很棒。谢谢！

标签： javascripthtmlcssfirebase

解决方案

我已将您的代码复制到我身边，需要更新代码。

  1. 首先你应该在元素下放置包含 javascript 代码。浏览器将在一个流程中从头到尾编译脚本，因此顺序对于捕获代码中的元素至关重要。
  2. 您不必通过 javascript 将 onclick 链接到 resetbutton，因为在定义重置按钮时它已经绑定到 onclick 事件。

并且您应该保留典型的 html 表单，因为您的代码中缺少一些标签。所以你应该像下面这样更新html代码。

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

我已将其部署到 Firebase 托管，并且可以正常工作！ https://mytest-beb7e.web.app/

推荐阅读